@H_502_2@

react native 从 0.44 升级到 0.45，出现上述报错。

之前直接修改 FlatList 的 numColumns 变得不可行，报错其实已经给予了解决方法，就是在更改 numColumns 时，同时修改 FlatList 的 key 属性。

就拿我的代码来举例：

我的 FlatList 的 numColumns 有三个可能的值，如果手机不处在 WIFI 连接，那么就 FlatList 的 numColumns 为 1；如果手机处在 WIFI 连接，那么 numColumns 的数据又由横屏，竖屏来决定

下面显示修改后的代码，之前的代码只是少了 key 属性

<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,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}}
/>

实际显示

@H_502_2@

@H_502_2@

@H_502_2@