反应导航堆栈共享导航选项

Posted 2023-03-13

【中文标题】反应导航堆栈共享导航选项

【英文标题】：react-navigation-stack sharing navigationOptions

【发布时间】：2020-07-14 22:25:50

【问题描述】：

我正在尝试使用 StackNavigator，并且我想在其他屏幕上使用相同的导航。

我的配置：

展会版本：3.0.10 “反应导航”：“^4.3.6”， “反应导航堆栈”：“^2.3.10”

在我的Navigation.js：

import  createAppContainer  from 'react-navigation'
import  createStackNavigator from 'react-navigation-stack'
import Step1 from '../Components/Steps/Step1'
import Step2 from '../Components/Steps/Step2'

const StepsStackNavigator = createStackNavigator(
  Step1: 
      screen: Step1,
      navigationOptions: 
      title: 'Etape 1',
    ,
  Step2: 
      screen: Step2,
    navigationOptions: 
      title: 'Step2'
    
  
)

export default createAppContainer(StepsStackNavigator)

这是我想分享的道具，但我想保留每个屏幕的标题

 headerStyle: backgroundColor: 'rgba(255, 255, 0, 0.7)',
 headerTintColor: 'black',
 headerTitleStyle: fontWeight: 'bold'

有人可以帮帮我！

【参考方案1】：

这是我当前如何设置堆栈导航器的一个很好的例子，您的选项已被粘贴。

const MainStackNavigator = createStackNavigator(
  Step1: 
    screen: Step1,
    navigationOptions: 
      title: 'Etape 1'
    
  ,
  Step2: 
    screen: Step2,
    navigationOptions: 
      title: 'Step2'
    
  
, 
  headerStyle: backgroundColor: 'rgba(255, 255, 0, 0.7)',
  headerTintColor: 'black',
  headerTitleStyle: fontWeight: 'bold'
);

const AppNav = createAppContainer(MainStackNavigator);

export default AppNav;

如果您安装了智能感知，则可以在 cmd 中单击 createStackNavigator 的导入并查看它接收的参数，特别是第二个参数。 Cmd 单击其中任何一个将带您进入声明并向您显示可用的配置选项。

【讨论】：

感谢您的快速回答。但我是 JS 的初学者并且反应原生，所以我不明白如何将它与我的 navigationOption 一起用于 Step1 和 Step 2

为清楚起见进行了更新，./routes 中的文件只是导出了一个对象

createStackNavigator 只是一个接受 2 个参数的函数，第一个是包含您的路线的对象，第二个是包含导航选项的对象

现在我明白你做了什么，应用程序运行，我可以浏览我的屏幕，但是当我尝试你的代码时，它不接受包含 headerStyle、headerTintColor、headerTitleStyle 的 2 参数，但是，"标题”在第一个参数改变