通过屏幕组件的道具将组件传递给导航屏幕

Question

我正在构建一个应用程序，该应用程序在主屏幕上有一个路由到许多其他屏幕的列表。

我创建了一个在主页上呈现的列表组件，因此需要将导航向下传递给列表组件。反过来，列表组件将根据按下的项目确定显示哪个屏幕。

我正在 router.js 文件中使用 Stack Navigator

export const HomeStack = StackNavigator({

Home: {
  screen: Home,
  navigationOptions: {
    title: 'Home',
  },
},
Nutrition: {
   screen: Nutrition,
   navigationOptions: {
     title: 'Nutrition',
    }
  },
});

在我的 home.js 屏幕中，渲染方法中有以下代码

render() {
 return (
  <View>
      <View>
        <ListComponent navigate={this.props.navigation.navigate('')} />
        <Button
        title="Go to Nutrition"
        onPress={() => this.props.navigation.navigate('Nutrition')}
        />
      </View>
  </View>
);

}

按钮成功路由到 Nutrition.js 屏幕。

但是，我试图让我的 ListComponent.js 处理路由的位置，因为此文件映射到我的列表数组。

  render() {
   return (
     <List>
       {ListData.map((listItem, i) => (
        <ListItem
        key={i}
        title={listItem.title}
        leftIcon={{ name: listItem.icon }}
        onPress={this.onPressHandler(listItem.title)}
        />
      ))}
     </List>
   );
 }

如何正确地将导航作为道具传递给 ListComponent.js，然后使用列表数组中的标题来确定显示哪个屏幕？

Answer 1

更改此行：

   <ListComponent navigate={this.props.navigation.navigate('')} />

对此：

   <ListComponent navigate={(screen)=>this.props.navigation.navigate(screen)}/>

并更改此

  <ListItem
    key={i}
    title={listItem.title}
    leftIcon={{ name: listItem.icon }}
    onPress={this.onPressHandler(listItem.title)}
    />

对此:-

  <ListItem
    key={i}
    title={listItem.title}
    leftIcon={{ name: listItem.icon }}
    onPress={()=>this.props.navigate(listItem.title)}
    />

因为您是直接调用方法而不是将其绑定到组件。

我假设您在 ListItem.js 中的代码是正确的。

通过屏幕组件的道具将组件传递给导航屏幕

Passing a component a navigation screen via props from screen component

javascript

reactjs

react-native

react-navigation

react-props