如何将列表视图与反应导航相结合

Question

我有一个包含很多项目的列表视图。我想做的是触摸项目，然后跳转到另一个页面。 我的问题是如何将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>
)
}

Answer 1

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

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

Answer 2

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