与参数的反应导航

Question

我正在使用React navigation我正在寻找一种方法将参数传递到我的导航堆栈中，如下所示。我实际上有一个屏幕，我想要使用X次。它只需要一个url和一个标题，并且基于url它应该对每个url完全相同。

所以我想创建一个像这样的对象：

const urls = {
  {title: 'foo', url: 'https://someurl'},
  {title: 'bar', url: 'https://someotherurl'}
}

现在在我的导航组件中，我想做的事情如下：

export default createMaterialTopTabNavigator({
 SomeKey: {
   // Loop here over the urls and create a component and pass props.
 }   
});

我的问题是我在文档中找不到如何通过导航器将title和url参数传递给特定的屏幕。

有什么建议？

Answer 1

我可以帮助你完成一个部分，你可以像这样从Navigator传递变量

export default createMaterialTopTabNavigator({
 ScreenOne: {
   screen:props=> <ScreenOne {...props} screenProps={yourpropsr}/>
 }   
});

文档中有StackNavigator的示例，但我希望这也适用于TabNavigator。 Documentation link here

Answer 2

我在我的应用程序中做了类似的事情，但是我从API中抓取我的数组并在其上构建我的导航。对于我的数组中的每个项目，我在选项卡导航中构建相同的屏幕设置，并从抽屉导航器中获取它们。

你可以这样做：

let NavigatorConfig = {};

urls.forEach(item => {
    NavigatorConfig = {
        ...NavigatorConfig,
        [item.title]: {
            screen: props => <MyComponent {...props} url={item.url} />
        }
    };
});

export default createMaterialTopTabNavigator(NavigatorConfig);