วิธีจัดการกับข้อผิดพลาด "ต้องแสดงสตริงข้อความภายในองค์ประกอบ " ใน ReactNative

ขณะพัฒนาแอป คุณอาจพบข้อผิดพลาดตามที่ระบุไว้ข้างต้น นี่คือรหัสที่ทำให้เกิดข้อผิดพลาด -

ตัวอย่าง

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
   render() {
      return (
         <View style={styles.container}>
            <Image
               style={styles.stretch}
               source={{
                  uri:
               'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png ',
               }}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   },
});

ข้อผิดพลาดที่แสดงบนหน้าจอมีดังนี้ -

ข้อผิดพลาดเกิดขึ้นจากสาเหตุต่อไปนี้ อย่าลืมหลีกเลี่ยงข้อผิดพลาดเหล่านั้นขณะเข้ารหัสในแอปของคุณ

สาเหตุแรกสำหรับข้อผิดพลาดเกิดจากการเยื้องที่ไม่ถูกต้อง จำเป็นอย่างยิ่งที่แต่ละองค์ประกอบเยื้องอย่างถูกต้อง องค์ประกอบลูกถูกเยื้องอย่างถูกต้องภายในองค์ประกอบหลัก

กรณีที่สองเกิดจากช่องว่างที่ส่วนท้ายของแต่ละส่วนประกอบ ลบช่องว่างออกจากส่วนท้ายของหน้าจอและคอมไพล์อีกครั้ง มันจะทำงานได้ดี โปรดระวังเมื่อคัดลอกและวางโค้ดจากแหล่งอื่น คุณจะพบข้อผิดพลาดนี้ในกรณีส่วนใหญ่

ให้เราแก้ไขโค้ดและตรวจสอบผลลัพธ์อีกครั้ง

ตัวอย่าง

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
   render() {
      return (
         <View style={styles.container}>
            <Image style={styles.stretch} source={{uri:
               'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png
         '}} />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   }
});

ผลลัพธ์