一次将本机 set defaultNavigationOptions 反应到多个堆栈导航

Question

我有一个选项卡布局，其中每个选项卡都是一个堆栈导航器。每个 stacknavigator 需要具有相同的 defaultStackNavigationOptions。

有没有办法为一组导航器设置默认选项（即(HomeStack, SubjectStack, ...).defaultNavigationOptions）？

编辑： 快速编辑澄清。我目前的代码是这样的：

const homeStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsPage,
},
{
  defaultNavigationOptions: {
    headerStyle: { backgroundColor: constants.color.primary },
    headerTitleStyle: { color: "white" },
  }
});
const subjectStack = createStackNavigator({
  Subject: SubjectScreen,
  News: NewsPage,
},
{
  defaultNavigationOptions: {
    headerStyle: { backgroundColor: constants.color.primary },
    headerTitleStyle: { color: "white" },
  }
});
//...

这些被加载到一个tablayout中：

export const HomeTabNavigator = createBottomTabNavigator(
  {
    Home: {
        screen: homeStack,
    },
    Subject: { 
        screen: subjectStack,
    },
    //...
  }
);

我希望一次在每个 StackNavigator 上设置 defaultStackNavigation，而不必每次都复制粘贴或调用函数。

如果我在选项卡布局上的 HomeStack 上导航，我不希望它影响主题选项卡上 Subjectstack 的当前堆栈。

Answer 1

我现在找到了一个解决方案。我只是创建了一个对象

const defaultNavigationOptions = {
    headerStyle: { backgroundColor: constants.color.primary },
    headerTitleStyle: { color: "white" },
}

并加载它而不是常规导航选项，我可以在其中扩展默认导航选项

{
    defaultNavigationOptions: {
    ...defaultNavigationOptions,
    headerStyle: { backgroundColor: constants.color.secondary },
}

Answer 2

你可以这样做。

 const stackNavigator = createStackNavigator(
      {
        Home: { screen: HomeTab },
        Horse: { screen: HorseTab }
      },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: "yellow"
          }
        },
        cardStyle: {
          backgroundColor: "blue"
        }
      }
    );

更多阅读可以参考here

在您的代码中，您可以像这样更新，

const stack = createStackNavigator({
  Home: HomeScreen,
  Subject: SubjectScreen
},
{
  defaultNavigationOptions: {
    headerStyle: { backgroundColor: constants.color.primary },
    headerTitleStyle: { color: "white" },
  }
});

或

const HomeTabNavigator = createBottomTabNavigator(
  {
    Home: {
        screen: homeStack,
    },
    Subject: { 
        screen: subjectStack,
    },
    //...
  }
);


HomeTabNavigator.navigationOptions = ({ navigation }) => ({
  headerTitle: (
    <Text style={{}}>
      Result
    </Text>
  ),
  headerStyle: {
    backgroundColor: "white"
  }
});


export { HomeTabNavigator }