在 react-native 中扩展屏幕选项

Question

我在堆栈导航器中有几个屏幕，如下所示

   <Stack.Navigator screenOptions={TransitionScreenOptions}>
      <Stack.Screen
        options={stackoptions}
        name="videoScreen"
        component={videoScreen}
      />
      <Stack.Screen
        options={stackoptions}
        name="registerScreen"
        component={SignUpScreen}
      />
</Stack.Navigator>

我为所有屏幕设置了如下选项

const stackoptions = ({ navigation }) => ({
  headerBackTitleVisible: false,
  headerStyle: {
    backgroundColor: "#000",
  },
  headerTintColor: "#fff",
  headerRight: () => {
    return (
      <Pressable
        style={{ paddingRight: 8 }}
        onPress={() => navigation.toggleDrawer()}
      >
        <AntDesign name="menu-fold" size={30} color="white" />
      </Pressable>
    );
  },
});

现在，我如何覆盖或添加某些选项到我的屏幕之一，例如下面的内容，我只想修改 headerTintColor，而除了 headerTintColor 之外应该使用其余的堆栈选项。

  <Stack.Screen
             options={...stackoptions, headerTitle: "" }
            name="registerScreen"
            component={SignUpScreen}
          />

Answer 1

for all the screens i set options like below

这是不必要的。您可以在 screenOptions 中指定常用选项，它们将应用于所有屏幕，不需要为每个屏幕重复它们。您可以使用扩展运算符将您的 TransitionScreenOptions 与其他人合并：

<Stack.Navigator screenOptions={({ navigation }) => ({
  ...TransitionScreenOptions,
  headerBackTitleVisible: false,
  headerStyle: {
    backgroundColor: "#000",
  },
  headerTintColor: "#fff",
  headerRight: () => {
    return (
      <Pressable
        style={{ paddingRight: 8 }}
        onPress={() => navigation.toggleDrawer()}
      >
        <AntDesign name="menu-fold" size={30} color="white" />
      </Pressable>
    );
  },
})}>

你可以这样做：

options={{ headerTitle: "" }}

这将覆盖在 screenOptions

中指定的相同选项

如果需要使用当前结构，调用stakOptions函数并在传播之前传递参数：

options={args => ({
  ...stackoptions(args),
  headerTitle: ""
})}

在 react-native 中扩展屏幕选项

Extend an Screen options in react-native

reactjs

react-native

react-navigation

react-navigation-v5