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> 
)}