隣接するJSXのネイティブエラー - エラー

Question

私はこれを持っていますリアクションネイティブコード、私はいくつかのAPIデータを解析しようとしています。

 {this.state.articles.map(article => (
    <Image 
     style={{width: 50, height: 50}} 
     source={{uri: article.urlToImage}} 
    /> 

<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text> 

と私はそれを実行するたびに、私が言うエラーが出る：私は何をすべきか見当がつかない

Adjacent JSX elements must be wrapped in an enclosing tag 

を、誰も私を助けることができますか？ありがとう！

Answer 1

.mapコールの結果は、一度に1つの要素だけを返すことができます。 JSXコンパイラは隣接する2つの要素（ImageおよびText）を認識するため、前述のエラーが発生します。

溶液を鑑みて二つの成分をラップすることであろう

{this.state.articles.map(article => (
    <View style={{ some extra style might be needed here}}> 
    <Image 
     style={{width: 50, height: 50}} 
     source={{uri: article.urlToImage}} 
    /> 
    <Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text> 
    </View> 
)}