android - 尝试在文本中嵌套 View 时出现 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)返回代码以根据当前天气文本(即“下雨”、“多云”、“有风”等)和 tableData.map 显示 SVG 图像。负责将数据映射到表中。此代码在 IOS 上完美运行，表格显示动画 SVG 文件，但是当我在 android 上运行它时，出现错误:

"Invariant violation: Nesting of <View> within <Text> is not supported on android."

我对我正在使用的表进行了一些测试，我的结论是该表以某种方式实现了 <Text> </Text>。对象，所以当我通过 <SVGImage>进入表数据我收到嵌套 View 错误。有什么方法可以绕过这个问题，或者我可以通过其他什么方法在 Android 的 table 上显示我的 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 React Native <Text>组件仅支持 iOS 上的嵌套 View 。 Cell你的第一个组件 link使用 <Text>将您传递的数据包装到表中，因为您传递的是 <View>对于您的图像单元，它不起作用。

我想您可以尝试更改 <Cell>组件以支持自定义渲染器。

或者您可以按如下方式修改 Cell 组件(第 39 行):

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