Question

如何将参数从堆栈导航器共享到嵌套在选项卡导航器中的几个堆栈导航器？

const UsersStack = createStackNavigator(...)
const PostsStack = createStackNavigator(...)
const AlbumsStack = createStackNavigator(...)
const ToDosStack = createStackNavigator(...)

const MainTabNavigator = createBottomTabNavigator({
  PostsStack,
  AlbumsStack,
  ToDosStack
});

const AppNavigator = createAppContainer(
  createSwitchNavigator({
    User: UsersStack,
    Main: MainTabNavigator
  })
);

我正在使用UsersScreen中的UsersStack。

navigation.navigate("Main", { userId: "1" })

到达PostsScreen内的PostsStack，没有参数

navigation.navigate("Posts", { userId: "1" })

在可用参数的情况下到达PostsScreen内的PostsStack，但仅在PostsStack上。将标签切换到AlbumsStack或ToDosStack表示没有可用的参数。

预期的输出将在所有堆栈上具有userId参数。

Answer 1

最好的方法是使用Context API。创建上下文并保留您的用户ID，然后将Stack Navigation组件包装在<?php $start = (new DateTime('2019-02-11')); $end = (new DateTime('2019-04-23')); $months = new DatePeriod($start, DateInterval::createFromDateString('1 month'), $end); $days = new DatePeriod($start, DateInterval::createFromDateString('1 day'), $end); echo "<table border=1><tr>"; foreach ($months as $month){ echo "<td>".$month->format("M"); foreach ($days as $day) { if($month->format("M")==$day->format("M")){$d++;} } echo " (".$d." days)</td>"; unset($d); } echo "</tr></table>"; ?>

中

Context.Provider

现在要消耗import NavigationContext from './components/MyContext' export default class App extends React.Component { render() { return ( <NavigationContext.Provider value={{ "userId": "1" }}> <AppNavigator /> </NavigationContext.Provider> ); } }，请使用userId，它将接收当前的上下文值并将其返回到所有堆栈导航器屏幕

Context.Consumer

从此处查看示例https://snack.expo.io/@selvaganesh93/navigationglobalcontextdemo

在反应导航中在堆栈导航器之间共享参数状态

1 个答案: