先说结论: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>
)}