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

}

Button成功路由到 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中的代码是正确的。

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

1 个答案: