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

使用参数进行反应导航

2 个答案: