ReactNative报错Cannot add a child that doesn't have a YogaNode to a parent without a measure function!

先说结论：react-native做的APP在Android真机上跑时，可能会出现各种异常崩溃导致APP崩掉，或者控制台报错，我最常碰到的4种情况如下：

（1）不能将文本放到View组件中，而应放在Text组件里

（2）使用array.length && array,map((item, index) => { return <View></View> }) // 使用&&导致的报错

（3）由于保存格式化工具自动在结尾增加分号";"或者人为手动失误增加的标点符号导致的编译报错

（4）将不该属于某个RN组件的属性比如style中的某个属性给了TouchableOpacity组件，那么控制台就会报红色错误

 

 今天在android机上测试react-native做的App，出现了这个报错：

 

经过一段一段的代码测试，找出了问题的原因，下面贴代码

原代码：

 

<View style={[styles.row, { marginTop: 10, marginBottom: 6 }]}>

                {/* 客户等级标签 */}

                {

                  overview && overview.custLevel ? <View style={styles.labelWrap}>

                    <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{overview.custLevel + '级'}</Text>

                  </View> : null

                }

 

                {/* 事实/潜在客户标签 */}

                {

                  overview && overview.sourceType ? <View style={styles.labelWrap}>

                    <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{dictKeyToValue(overview.sourceType, 'CUSTOMER_TYPE')}</Text>

                  </View> : null

                }

 

                {

                  labels.length && labels.map((item, index) => {

                    return (<View key={index} style={styles.labelWrap}>

                      <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{item.value}</Text>

                    </View>)

                  }) 

                }

              </View>

修复后的代码：

<View style={[styles.row, { marginTop: 10, marginBottom: 6 }]}>

                {/* 客户等级标签 */}

                {

                  overview && overview.custLevel ? <View style={styles.labelWrap}>

                    <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{overview.custLevel + '级'}</Text>

                  </View> : null

                }

 

                {/* 事实/潜在客户标签 */}

                {

                  overview && overview.sourceType ? <View style={styles.labelWrap}>

                    <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{dictKeyToValue(overview.sourceType, 'CUSTOMER_TYPE')}</Text>

                  </View> : null

                }

 

                {

                  labels.length ? labels.map((item, index) => {

                    return (<View key={index} style={styles.labelWrap}>

                      <Text style={{ fontSize: 12, color: 'white', alignItems: 'center', }}>{item.value}</Text>

                    </View>)

                  }) : null

                }

              </View>

 

从原代码看，好像也没问题，对不对？

不过，就是报错，使用三元运算符替代，就不报错了 ，在F12的console输出测试 1 && [1,2,3].map(it=>it)  // 返回了[1,2,3]没毛病啊，经过分析，觉得原因最可能出在react-native的语法解析上。。。

不可以使用()包裹，代码如下： 

{showCount && (

          <TouchableOpacity activeOpacity={0.88} onPress={onPress}>

            <View style={styles.flexRow}>

              <Text style={styles.countNum}>

                {/* 共计 */}

                {countString}

              </Text>

              <IconView type={'\uf604'} size={15} color={OAColor.descText} />

            </View>

          </TouchableOpacity>

        )}