通過嵌套導航器反應本機傳遞道具

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

目前，我使用危險的GetParent() 來訪問道具，但我發現它不適合我的設計，而且它也不適用於多個 Manga 條目（即道具不會改變）。 理想情況下，我希望將道具（數據對象）傳遞給選項卡導航器下的信息和章節 URI。 我認為這與將道具傳遞給路由器本身有關嗎？ 所以我的問題是：是否也可以將 props 發送給子孩子，或者我是否必須以某種方式重新設計我的路由器以將組件傳遞給 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.data