React Native升级后的黄框错误/警告 [英] Yellow Box Errors/Warnings after React Native Upgrade

问题描述

我最近将我的项目从React Native 0.15升级到了0.20。我想这是一个飞跃，对于这些黄框警告我还是很陌生。现在，我收到2条警告，如下所示。

I recently upgraded my project from React Native 0.15 to 0.20. I guess this was kind of a leap and I'm quite new to these Yellow Box Warnings. Right now I got 2 warnings as follows.

警告一：

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

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ItemViewPage.

警告二：

RCTView类型的视图＃2359具有阴影集，但不能有效地计算
阴影。考虑设置背景色来解决此问题，例如
或将阴影应用于更特定的组件。

View #2359 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

strong>警告是由于使用了 const Radio = require（'react-native-simple-radio-button'）; 而不是从 react-native-simple-radio-button中导入Radio； 。更改完成后，警告一就消失了。

Figured out that Warning One was due to using const Radio = require('react-native-simple-radio-button'); instead of import Radio from 'react-native-simple-radio-button';. Once the change was done, Warning One was gone.

对于警告二，它发送的页面

样式代码：

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 渲染项目。

如代码所示，它已经具有背景色。那么为什么会出现这个警告？解决方法是什么？

As the code states, it already has the Background Color. So why is this warning coming? What is the fix? Thanks in advance.

推荐答案

这是因为您正在设置 backgroundColor 作为透明 rgba（255，255，255，0.0）。这是非常低效的。您可以在此提交日志
中阅读有关此内容的所有信息 https://github.com / facebook / react-native / commit / e4c53c28aea7e067e48f5c8c0100c7cafc031b06

This is because you are setting the backgroundColor as transparent rgba(255, 255, 255 ,0.0). This is very inefficient. You can read all about this in this commit log https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

这篇关于React Native升级后的黄框错误/警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！