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',
   }
});

출력