React 导航：向 Stack.Screen 元素添加填充

Question

我想在屏幕上的 stack.screen 元素之间添加填充，以便更容易选择它们。可以以某种方式添加填充吗？我的代码 sinpet 如下

...

我尝试使用视图元素来指定样式，但反应导航不允许视图元素带有一个样式。

我尝试使用元素来指定样式，但反应导航不允许视图元素包含一个。

Answer 1

react 导航文档没有指定

screenOptions

可以做的所有事情，所以我必须使用 typescript 的自动完成功能来找到它；但 screenOptions 确实有一个

contentStyle

选项。使用

Stack.Group

以便只有您想要的屏幕具有该样式：

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './Home';
import SettingsScreen from './Settings';
import ProfileScreen from './Profile';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Group
          screenOptions={{
            contentStyle: { padding: 10, borderWidth: 3 },
          }}>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              title: 'Awesome app',
            }}
          />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Group>
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

演示