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

画面に表示されるエラーは次のとおりです-

エラーは次の理由で発生します。アプリでコーディングするときは、これらの間違いを避けてください。

エラーの最初の原因は、インデントが悪いためです。各コンポーネントが適切にインデントされていることが非常に必要です。子要素は、親コンポーネント内で適切にインデントされます。

2番目のケースは、各コンポーネントの最後にスペースが残っているためです。画面の最後からスペースを削除して、再度コンパイルします。それはうまくいくでしょう。別のソースからコードをコピーして貼り付ける場合は注意してください。ほとんどの場合、このエラーが発生します。

コードを修正して、出力をもう一度確認しましょう。

例

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

出力