React Native Navigation Custom Border

Question

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

Custom Style for React Navigation

我的当前代码：

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>
}

哪个会产生这样的内容：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9kTFRkbC5wbmcifQ==” alt =“ iOS模拟器的屏幕截图”>