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

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

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

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 单击其中任何一个将带您进入声明并向您显示可用的配置选项。