反应导航堆栈共享navigationOptions

Question

我正在尝试使用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'}

有人可以帮我！

Answer 1

这是一个很好的示例，说明了我目前如何设置堆栈导航器，您的选项已粘贴。

import App_Routes from './routes';

const MainStackNavigator = createStackNavigator(App_Routes, {
 headerStyle: {backgroundColor: 'rgba(255, 255, 0, 0.7)'},
 headerTintColor: 'black',
 headerTitleStyle: {fontWeight: 'bold'}
});

const AppNav = createAppContainer(MainStackNavigator);

export default AppNav;

如果您已将intellisense安装到cmd，则可以+单击createStackNavigator的导入，并查看其接受的参数，特别是第二个参数。 Cmd +单击其中任何一个将带您到声明并显示可用的配置选项。