我有一个列表视图,比如:

<ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderMovie}
      style={styles.listView}
/>

它会显示如下行:

  <View style={styles.container}>
      <TouchableHighlight onPress={this._onPressButton.bind(this,movie)}>

        <Image
          source={{uri: movie.uri}}
          style={styles.thumbnail}
        />
    </TouchableHighlight>
    <View style={styles.rightContainer}>
      <Text style={styles.title}>{movie.id}</Text>
      <Text style={styles.year}>{movie.votes}</Text>
    </View>
  </View>

我有一个函数可以更新这个.状态具有电影"投票数"的数据源.但是这些变化并没有反映在UI中,但是当我记录这些变化时.状态dataSource,变化就在那里.我需要重新渲染行吗?他们不应该自动改变吗?

谢谢

推荐答案

要使React native重新渲染行,需要创建数组的副本,更新对象,然后对新创建的数组使用setState.例如:

let newArray = this.state.dataSource.slice();
newArray[indexToUpdate] = {
  ...this.state.dataSource[indexToUpdate],
  field: newValue,
};
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(newArray),
});

参考:

React-native相关问答推荐

React Native 组件中两次使用map的问题

TextInput 中的大写文本 - react native

如何在 navigation.js 文件中的 react-navigation 中当前路由名称?

react-native-snap-carousel 无法正确渲染

React Native - 当位置在Android上是绝对时视图消失

React中类似于 React Native 中的 FlatList

在 iOS 模拟器中运行 React Native 应用程序时找不到 UMModuleRegistryAdapter.h

TouchableOpacity 作为 ListView 中的 Item 仅在 TextInput 失go 焦点后做出响应

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

以编程方式在 React Native 中添加组件

我们如何将 Firebase Analytics 与基于 expo 的 react-native 应用程序一起使用

Typescript:onPress 类型

如何在 Text ReactNative 中包含 TouchableOpacity

如何使用 Expo 在真实的 iOS 设备上运行应用程序?

使用 React-Native Navigation 传递数据

Tools > Android 菜单在 Android Studio 中不存在

React Native 模块中的依赖注入

react-native iOS 应用在部署后不显示静态/本地资源

react-navigation 标题有一条微弱的线

React Native:无法解析模块 fs