React-native StackScreen,如何为所有的StackScreen使用相同的样式？

r7xajy2e 于 2023-05-18 发布在 React

关注(0)|答案(2)|浏览(158)

如何使所有的堆栈屏幕只有一个样式，因为它们都具有相同的样式。如你所见具有headerStyle、headerTitleStyle、headerLeft、headerTitleAlign的 prop 具有相同的值。
这是我的文件App.js

const MainNavigator = () => { 
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="MainScreen">

                    <Stack.Screen
                        name="MagicScreen"
                        component={MagicScreen}
                        options={{
                            title: 'Magic',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                    />

                    <Stack.Screen
                        name="FightingStyleScreen"
                        component={FightingStyleScreen}
                        options={{
                            title: 'Fighting Style',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                    />

                    <Stack.Screen
                        name="WeaponScreen"
                        component={WeaponScreen}
                        options={{
                            title: 'Weapons',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                     />

            </Stack.Navigator>
        </NavigationContainer>
    )
};

我试着在google上找到示例代码。但还是找不到这个例子：“）

react-native

来源：https://stackoverflow.com/questions/76262999/react-native-stackscreen-how-to-use-same-styling-for-all-those-stackscreen

2条答案

按热度按时间

fafcakar1#

只需将screenOptions属性传递给Stack.Navigator组件。它定义堆栈中每个屏幕的默认选项。这样的东西会起作用：

<Stack.Navigator 
    initialRouteName="MainScreen"
    screenOptions={{
       headerStyle: {
           backgroundColor: '#0074C4',
       },
       headerTitleStyle: {
           color: 'white',
           fontSize: 24
       },
       headerLeft: null,
       headerTitleAlign: 'center',
   }}
>

然后，您可以分别更改每个屏幕的标题。

赞(0）回复(0）举报 2023-05-18

ovfsdjhp2#

Stack.Navigator有一个screenOptions prop ，它与Stack.Screen上的options prop 非常相似。它可以接受一个硬编码的对象作为一个值，或者一个返回对象的函数。在您的情况下，该函数将是最好的，因为它允许您根据当前路由设置头标题：

// ...
<Stack.Navigator
  initialRouteName="MainScreen"
  screenOptions={({ route, navigation }) => ({
    headerStyle: {
      backgroundColor: '#0074C4',
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: 24
    },
    headerLeft: null,
    headerTitleAlign: 'center',
    title: route.name === "MagicScreen"
      ? "Magic"
      : route.name === "FightingStyleScreen"
      ? "Fighting Style"
      : route.name === "WeaponScreen"
      ? "Weapons"
      : "Default",
  })}
/>

如果你不喜欢大的条件链，你可以放弃这个函数，只传递一个包含headerStyle、headerTitleStyle、headerLeft和headerTitleAlign的对象。然后，您将在每个屏幕的选项中设置标题，就像您目前正在做的那样。
或者，您可以创建一个对象作为路由名称Map：

// ...
const routeNameMap = {
  MainScreen: "Main",
  MagicScreen: "Magic",
  FightingStyleScreen: "Fighting Style",
  WeaponScreen: "Weapons",
}
// ...

在screenOptions函数中，将title设置为routeNameMap[route.name] || "Default"

赞(0）回复(0）举报 2023-05-18

我来回答

React-native StackScreen,如何为所有的StackScreen使用相同的样式？

2条答案

相关问题

热门标签

最新问答