React Native通过嵌套导航器传递道具

Question

嗨，我很想知道如何在导航仪上传递道具，或者是否有更好的方法来设计我的结构。

const MangaTabRouter = createMaterialTopTabNavigator(
{
    Info: { screen: Manga },
    Chapter: { screen: Chapter }
  }
);

const Stack = createStackNavigator(
  {
    Main: { 
      screen: MangaTabRouter,
      navigationOptions: {
        header: props => <CustomHeader {...props} />
      }
    }
  }
);

const HomeScreenRouter = createDrawerNavigator(
  {
    MyLibrary: { screen: HomeScreen },
    Sources: { screen: Sources },
    Manga: { screen: Stack }
  },
  {
    contentComponent: props => <SideBar {...props} />,
    initialRouteName: "MyLibrary"
  }
);

const AppContainer = createAppContainer(HomeScreenRouter);

然后我有一个调用主URI的按钮，然后去那里传递一些道具。

this.props.navigation.navigate('Main', {data});

目前，我使用dangerouslyGetParent（）来访问道具，但我发现它不适合我的设计，也不适用于多个漫画条目（即道具不会改变）。理想情况下，我希望将props（数据对象）传递给选项卡导航器下的Info和Chapter URI。我认为它与将道具传递给路由器本身有关？所以我的问题是：是否有可能向子子节点发送道具，或者我是否必须以某种方式重新设计我的路由器以将组件传递给Main，然后将MangaTabRouter作为其中的子组件？另外，有没有办法将我发送给Info的道具传递给标题？我正在尝试但空手而归。谢谢！

Answer 1

您需要将数据作为项目传递：this.props.navigation.navigate('Main', {data : item})

并在您的子组件中调用this.props.navigation.state.params.data

Answer 2

const MangaTabRouter = createMaterialTopTabNavigator(
  {
    Info: { screen: props => <Manga {...props}/> },
    Chapter: { screen: props => <Chapter {...props}/> }
  }
);

class ExtendStack extends React.Component {
  static router = MangaTabRouter.router;
  render() {
    const { navigation } = this.props;
    return <MangaTabRouter navigation={navigation} screenProps={navigation.state.params} />;
  }
}

const Stack = createStackNavigator(
  {
    Main: { 
      screen: ExtendStack,
      navigationOptions: {
        header: props => <CustomHeader {...props} />
      }
    }
  }
);

我不得不使用screenProps传递新信息。我将仔细研究标题并尝试类似的方法。