反应导航多个堆栈配置

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" })