反应本机导航自定义边框

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的{​​{1}}属性中：

screenOptions

这将产生如下内容：