如何将 ListView 与 react-navigation 结合使用答案

【问题标题】：How do I combine ListView with react-navigation如何将 ListView 与 react-navigation 结合使用
【发布时间】：2019-06-06 12:30:33
【问题描述】：

我有一个包含很多项目的列表视图。我想做的是触摸项目然后跳转到另一个页面。我的问题是如何将navigator={this.props.navigator} 传递给renderRow？

谢谢！

这是我的listview：

  return (
      <ListView
        style={ styles.listView }
        dataSource={ this.state.dataSource }
        renderRow={ this.renderRow }} />
      );

这是我的renderRow：

renderRow(event: Object) {
    return (

      <View>
      <TouchableOpacity onPress={ () => this.props.navigation.navigate('Browser', {
                                          link: event.ItemName,
                                        }) }>
        <View style={ styles.row }>
          <Text style={ styles.textContainer }>
            <Text style={ styles.title }>
              { event.ItemName }
            </Text>
            <Text style={ styles.type }>
              { event.BTContent }
            </Text>
          </Text>
        </View>
        <View style={ styles.cellBorder }></View>
        </TouchableOpacity>
      </View>

    )
  }

【问题讨论】：

您使用的是函数式组件还是类组件？你有任何错误吗？您使用的是react-navigation 还是react-native-navigation？

标签： reactjs react-native react-router

【解决方案1】：

看起来你应该对我这样做。无论您使用的是函数式组件还是类组件，组件的 props 都将包含 navigation。您无需向renderRow 传递任何内容。

旁注：ListView 已弃用。根据您的用例使用FlatList 或SectionList。 https://facebook.github.io/react-native/blog/2017/03/13/better-list-views

【讨论】：

【解决方案2】：

ListView 已弃用，请改用 FlatList。如果 renderRow 函数在反应导航中用作屏幕的同一类中，则您可以访问方法内的导航道具，而不必传递任何内容。如果没有，请发布完整的相关代码。

【讨论】：