React Native Upgrade后的黄色框错误/警告

Question

我最近将我的项目从React Native 0.15升级到0.20.我想这是一个飞跃,我对这些黄箱警告很新.现在我得到2个警告如下.

警告一:

警告:React.createElement:type不应为null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查ItemViewPage的render方法.

警告二:

RCTView类型的视图#2359具有阴影集但无法有效地计算阴影.考虑设置背景颜色来解决此问题,或将阴影应用于更具体的组件.

弄清楚,警告一是由于使用const Radio = require('react-native-simple-radio-button');而不是import Radio from 'react-native-simple-radio-button';.改变完成后,警告一了.

对于警告二,它从中发送的页面具有使用阴影的位置.

造型代码:

container: {
    overflow: 'hidden',
    width: Dimensions.get('window').width,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.0)',
    shadowColor: '#000000',
    shadowOpacity: 1,
    shadowRadius: 20,
    shadowOffset: {width: 0, height: -5},
    justifyContent: 'center'
}

码:

renderItem: function (item) {
    var Dimensions = require('Dimensions');
    return (
        <View style={styles.mainContainer}>
            <TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.buttonFill}
                                onPress={this.categoryPressed.bind(this, item.categoryId, item.name)}>
                <View style={styles.container}>
                    <KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={{uri: item.image}} placeholderSource={{uri: './images/placeholder.jpg'}}/>
                    <View>
                        <LinearGradient
                            colors={[processColor('rgba(255, 255, 255, 0.0)'), processColor('rgba(0,0,0,0)'), processColor('rgba(0,0,0,0.7)')]}
                            style={styles.linearGradient}>
                            <View style={styles.allContent}>
                                <View style={styles.imageRowContainer}>
                                    <View style={styles.nameContainer}>
                                        <Text style={styles.textMain}>{item.name}</Text>
                                    </View>
                                    {this._renderItemCountSection(item.itemsCount)}
                                    <View style={styles.continueContainer}>
                                        <Text style={styles.textArrow}>&#xf105;</Text>
                                    </View>
                                </View>
                            </View>
                        </LinearGradient>
                    </View>
                </View>
            </TouchableHighlight>

        </View>
    );
}

renderItem函数是从中渲染项目ListView.

正如代码所述,它已经具有背景颜色.那么为什么会出现这个警告呢？修复是什么？提前致谢.

Answer 1

对于警告二

就我而言，我删除了shadowOpacity，将其添加到阴影颜色并使用RGBA 值。

shadowColor: 'rgba(0,0,0, 0.1)'

Answer 2

这是因为您将其设置backgroundColor为透明rgba(255, 255, 255 ,0.0).这是非常低效的.您可以在此提交日志中阅读所有相关内容 https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06