React Navigation 多堆栈配置

Question

我有一个包含多个页面的 DrawerNavigator，其中每个页面都是它们自己的 StackNavigator，这意味着我对每个堆栈都有一个堆栈配置。例如

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
},
{
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
})

我抽屉里的每一页都有一个。

所有这些堆栈配置都是相同的。 有没有办法在我的代码中只传递一次堆栈配置？

Answer 1

将您常用的配置放在一个文件中，然后在需要的地方导入和使用。

是的，据我所知，您必须为每个堆栈定义自定义配置。

// defaultStackConfig.js
export const defaultConfig = {
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
}


// Stack1.js

import {defaultConfig} from './defaultConfig'

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, defaultConfig)

// or with some custom mode

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, { ...defaultConfig, ...{ headerMode: "float" })