React Native中的相邻JSX - 错误

Question

我在我的这个React Native代码中，我试图解析一些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调用的结果一次只能返回一个元素。因为JSX编译器会看到两个相邻的元素（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> 
)}