响应-导航-堆栈共享navigationOptions

Question

我正在尝试使用StackNavigator，我希望通过我的其他屏幕使用相同的导航。

我的配置：

:3.0.10

• "react-navigation"："^4.3.6"，

• "react-navigation-stack"："^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;

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