Реагируйте на собственные пропускаемые объекты через вложенные навигаторы

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

У меня тогда есть кнопка, которая вызывает Main URI и также идет туда.как передача в некоторых реквизитах.

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

В настоящее время я использую dangerouslyGetParent () для доступа к реквизитам, но я считаю, что он не подходит для моего дизайна, а также он не работает с несколькими записями манги (т.е. реквизиты)не меняйся)В идеале я хотел бы передать реквизиты (объект данных) как URI Info, так и главы под навигатором вкладок.Я полагаю, это связано с передачей реквизита на сам маршрутизатор?Поэтому мой вопрос таков: возможно ли отправлять реквизиты дочерним элементам или мне нужно каким-то образом перепроектировать мои маршрутизаторы, чтобы передать компонент в Main, который затем содержит MangaTabRouter в качестве дочернего компонента?Кроме того, есть ли способ передать реквизиты, которые я отправил в Info, в заголовок?Я экспериментирую, но подхожу с пустыми руками.Спасибо!

Answer 1

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 для передачи новой информации.Я поближе посмотрю на заголовок и попробую с похожим подходом.

Answer 2

вам нужно передать данные как элемент: this.props.navigation.navigate('Main', {data : item})

и вызвать this.props.navigation.state.params.dat a в вашем дочернем компоненте