reactjs - React Native Navigation 自定义边框

Question

我是 React Native 的初学者。我想用自定义样式配置React Navigation 5.x。而且我无法像下面那样修剪边框底部。请帮我解决一下这个。

React 导航的自定义样式

我当前的代码：

function StackNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerStyle: styles.header,
                    headerBackImage: () => (
                        <Image
                            style={styles.headerBack}
                            source={require("../assets/icons/64x/chevron-left.png")}
                        />
                    ),
                    headerLeftContainerStyle: {
                        alignItems: "flex-start",
                        paddingHorizontal: theme.sizes.padding / 2
                    },
                    headerTitleStyle: styles.headerTitle
                }}
            >
                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: true }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    header: {
        height: theme.sizes.base * 5,
        backgroundColor: Colors.white,
        borderWidth: 0,
        elevation: 0,
        borderBottomWidth: 1,
        borderBottomColor: Colors.grayLight
    },
    headerBack: {
        height: 20,
        width: 20
    },
    headerTitle: {
        fontSize: 18,
        fontFamily: "Quicksand",
        letterSpacing: -1
    }
});

先感谢您。

Answer 1

You can add this style to the cardStyle property of the screenOptions:

function StackNavigator() {
    <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
                cardStyle : { backgroundColor : 'lightgray', margin : 15 },
                headerStyle: styles.header,
                headerBackImage: () => (
                    <Image
                        style={styles.headerBack}
                        source={require("../assets/icons/64x/chevron-left.png")}
                    />
                ),
                headerLeftContainerStyle: {
                    alignItems: "flex-start",
                    paddingHorizontal: theme.sizes.padding / 2
                },
                headerTitleStyle: styles.headerTitle
            }}
        >
            <Stack.Screen
                name="Login"
                component={LoginScreen}
                options={{ headerShown: true }}
            />
        </Stack.Navigator>
    </NavigationContainer>
}

Which will produce something like this: