嘗試在文本中嵌套視圖的 React Native Android 錯誤

Question

我正在開發一個帶有 react-native 的 iphone/android 應用程序，可以在表格中顯示天氣。 為了創建表格，我找到了這個用於 react-native 的表格布局庫： https : //github.com/Gil2015/react-native-table-component並在我的代碼中使用它。 對於表中的數據行之一，我還想顯示天氣的動畫 svg 文件，所以我使用了這個庫： https : //www.npmjs.com/package/react-native-svg-image 。 我的代碼貼在下面：

tableData = [["Weather" ,this.getIconForWeather(iconsWeather[0]), this.getIconForWeather(iconsWeather[1]), this.getIconForWeather(iconsWeather[2]), this.getIconForWeather(iconsWeather[3]), this.getIconForWeather(iconsWeather[4]), this.getIconForWeather(iconsWeather[5]), this.getIconForWeather(iconsWeather[6]), this.getIconForWeather(iconsWeather[7]), this.getIconForWeather(iconsWeather[8]), this.getIconForWeather(iconsWeather[9])],
            ["Temp", temp[0] + '°', temp[1]+ '°', temp[2]+ '°', temp[3]+ '°', temp[4]+ '°', temp[5]+ '°', temp[6]+ '°', temp[7]+ '°', temp[8]+ '°', temp[9]+ '°'],
            ["Precip" ,precip[0]+'%', precip[1]+'%', precip[2]+'%', precip[3]+'%', precip[4]+'%', precip[5]+'%', precip[6]+'%', precip[7]+'%', precip[8]+'%', precip[9]+'%'],
            ["Humidity" ,humidity[0]+'%', humidity[1]+'%', humidity[2]+'%', humidity[3]+'%', humidity[4]+'%', humidity[5]+'%', humidity[6]+'%', humidity[7]+'%', humidity[8]+'%', humidity[9]+'%'],
          ];

getIconForWeather(iconName) {
return <View style={{height: 40, width: 40, alignItems:'center', justifyContent:'center'}}>
              <SVGImage
              style={{ width: 40, height: 40, backgroundColor: 'transparent' }}
              scrollEnabled = {false}
              source={{uri: icons[iconName]}}
              />
              </View>
}

//this is the part of the code in my return() in render() that displays the table:
<View style={styles.table}>

           {/* Right scrollview wraper */}
           <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
             {/* If parent element is not table element, you should add the type of borderstyle. */}
             <TableWraper borderStyle={{borderWidth: 1,borderColor: 'rgba(255,255,255,0.0)',}}>
               <Row data={tableHead} style={styles.head} textStyle={styles.headText} widthArr={widthArr}/>

               {
                 tableData.map((data, i) => (
                   <Row key={i} data={data} style={[styles.list, i%2 && {backgroundColor: 'rgba(255,255,255,0.0)'}]} widthArr={widthArr} textStyle={styles.listText}/>
                 ))
               }

             </TableWraper>
           </ScrollView>
         </View>

變量tableData包含需要在表中顯示的所有數據。 我的問題關注的部分是this.getIconForWeather(iconsWeather[#])和tableData.map((data, i)) 。 函數getIconForWeather(iconName)返回代碼以根據當前天氣文本（即“下雨”、“多雲”、“刮風”等）顯示 SVG 圖像， tableData.map負責將數據映射到桌子。 這段代碼在 IOS 上運行良好，表格顯示了動畫 SVG 文件，但是當我在 android 上運行它時出現錯誤：

“不變違規：Android 不支持 <View> 嵌套在 <Text> 中。”

我對我正在使用的表進行了一些測試，我的結論是該表以某種方式實現了一個<Text> </Text>對象，因此當我將<SVGImage>傳遞到表數據中時，我得到了一個嵌套視圖錯誤。 有什么方法可以繞過這個，或者還有什么其他方法可以在 Android 的桌子上顯示我的 SVG 圖像？

for(let i = 0; i < days; i++){

await weatherBuildGUI.push(
<View key={i} style={styles.weatherDays}>

  <View style={{flex:0.25, alignItems:'center', justifyContent:'center'}}>
    <Text style={{fontWeight: 'bold', textAlign:'center'}}>{weatherHi[i]}</Text>
  </View>

  <View style={{flex:0.25, alignItems:'center', justifyContent:'center'}}>
    <Text style={{textAlign:'center'}}>${weatherLo[i]}</Text>
  </View>

  <View style={{flex:0.25, alignItems:'center', justifyContent:'center'}}>
    <Text style={{textAlign:'center', color:clr}}>{weatherDay[i]}</Text>
  </View>

  <View style={{flex:0.25, alignItems:'center', justifyContent:'center'}}>
    <Text style={{textAlign:'center', color:clr}}>{weatherIcon[i]}</Text>
  </View>
</View>
)
}

Answer 1

React Native <Text>組件僅支持 iOS 上的嵌套視圖。 第一個鏈接中的Cell組件使用<Text>來包裝您傳遞到表格中的數據，並且由於您為圖像單元格傳遞了一個<View> ，因此它不起作用。

我想您可以嘗試更改<Cell>組件以支持自定義渲染器。

或者您可以按如下方式修改 Cell 組件（第 39 行）：

{typeof data === 'object'
  ? <View>{data]</View>}
  : <Text style={[textStyle, styles.text]}>{data}</Text>}