javascript - 通过屏幕组件中的 props 将组件传递给导航屏幕

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>
   );
 }

如何正确地将导航作为 props 传递给 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)}
    />

当您直接调用该方法时，没有将其绑定(bind)到组件。

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