将本机设置 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，而不必每次都复制粘贴或调用一个函数。

如果我在 tablayout 上的 HomeStack 上导航，我不希望它影响主题选项卡上 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 },
}

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

react native set defaultNavigationOptions to multiple stacknavigations at once

javascript

navigation

react-native

react-navigation

react-navigation-stack