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" },
  }
});
//...

这些被加载到布局中：

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

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

如果我在TabLayout的HomeStack上导航，我不希望它影响Subject选项卡上SubjectStack的当前堆栈。

Answer 1

您可以执行以下操作。

 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 }

Answer 2

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

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

并加载它，而不是常规的导航选项，我可以在其中使用以下默认导航选项展开

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

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

2 个答案: