Question

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

警告一：

警告：React.createElement：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或a ReactClass（用于复合组件）。检查渲染方法 ItemViewPage。

警告二：

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

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

Answer 2

要警告两次

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

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

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

2 个答案: