Пользовательская граница 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

Вы можете добавить этот стиль в cardStyle собственность 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>
}

В результате получится что-то вроде этого: