Question

我有一个使用react-navigation的react-native应用程序。我想在整个堆栈导航器中传递一些道具，但是不确定该怎么做。

要提供更多详细信息，我的屏幕是：

ListThingsScreen：列出所有内容。
ShowThingScreen：显示事物的详细信息。
EditThingScreen：编辑事物。

它们的组织方式如下：

const HomeStack = createStackNavigator(
  {
    ListThings: ListThingsScreen,
    ShowThing: ShowThingScreen,
    EditThing: EditThingScreen,
  },
  {
    initialRouteName: "ListThings"
  }
);

export default createBottomTabNavigator({
  HomeStack
});

应用用户：

登录。
查看所有内容（在ListThingsScreen中）。
单击其中之一，跳至ShowThingScreen以查看其详细信息。
单击详细信息屏幕上的按钮，跳至EditThingScreen以编辑内容。
完成编辑后，跳回到ShowThingScreen。

在ListThingsScreen componentDidMount()中，我将进行异步调用以获取登录的用户数据，例如userId，username等。我希望堆栈中的所有屏幕都知道它们的行为正确显示和编辑时。

我能想到的解决方案：

按照反应导航docs的建议将参数传递给路线。这行得通，但是当我在堆栈中有更多屏幕时，我写了太多的代码，例如navigation.push("RouteName", {user})和navigation.getParam("user", "No user")。

这几乎是我找到的唯一解决方案。一种替代方法是使用React上下文。我比较喜欢这种方法，但是我想使用react-navigation，并且库中不存在Router和Route的概念。

// ListItemsScreen.js
import { BrowserRouter as Router, Route } from "react-router-dom";

const UserContext = React.createContext();

<UserContext.Provider value={{ user }}>
  <Router>
    <div className="app-container">
      <Route path="/show/:thingId" component={ShowThing} />
      <Route path="/edit/:thingId" component={EditThing} />
    </div>
  </Router>
</UserContext.Provider>

// ShowItemScreen.js
<UserContext.Consumer>
  {({user}) => (...)}
</UserContext.Consumer>

哪种方法更“正确”？如果是第二种方法，我该如何使用反应导航呢？

如何将参数传递到深度反应导航Stack Navigator

0 个答案: