react native 从 0.44 升级到 0.45,出现上述报错。react
以前直接修改 FlatList 的 numColumns 变得不可行,报错其实已经给予了解决方法,就是在更改 numColumns 时,同时修改 FlatList 的 key 属性。app
就拿个人代码来举例:ide
个人 FlatList 的 numColumns 有三个可能的值,若是手机不处在 WIFI 链接,那么就 FlatList 的 numColumns 为 1;若是手机处在 WIFI 链接,那么 numColumns 的数据又由横屏,竖屏来决定this
下面显示修改后的代码,以前的代码只是少了 key 属性spa
<FlatList data = {this.state.ds} renderItem = { this.state.isShowImage ? ({item}) => ( <TouchableOpacity onPress = {this._changeCoverUrl.bind(this, item.id, this.props.navigation.state.params.information)}> <View> <Image source = {{uri: item.image}} style = {styles.coverImageSize}/> </View> </TouchableOpacity> ) : ({item}) => ( <TouchableOpacity onPress = {this._changeCoverUrl.bind(this, item.id, this.props.navigation.state.params.information)}> <View style={item.title === undefined ? {} : { paddingVertical: 12, borderBottomWidth: 1, borderColor: '#90CAF9' }}> <Text style={styles.bookTitle}>{item.title}</Text> </View> </TouchableOpacity> )} keyExtractor = {(item) => item.id} // key 分别是 vShow, hShow, hide key = {(this.state.isShowImage ? (this.deviceHeight > this.state.deviceWidth ? 'vShow' : 'hShow') : 'hide')} // 对应有 WIFI 时的横屏显示、竖屏显示,以及无 WIFI 时的显示 numColumns = {this.state.isShowImage ? Math.floor(this.state.deviceWidth / 90) : 1} columnWrapperStyle = {this.state.isShowImage && {justifyContent: 'space-around', marginVertical: 5}} // FlatList最后一栏不能彻底显示 style = {{marginBottom: 60}} />
实际显示code