Реагировать на собственную границу навигации - PullRequest
Новая
       82

Реагировать на собственную границу навигации

1 голос
/ 13 марта 2020

Я новичок в React Native. Я хочу настроить React Navigation 5.x с пользовательским стилем. И я не могу обрезать границы снизу, как показано ниже. Пожалуйста, помогите мне с этим.

Пользовательский стиль для быстрой навигации

Мой текущий код: 

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

Спасибо заранее.

1 Ответ

0 голосов
/ 14 марта 2020

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

, которое будет производить что-то вроде этого:

Screenshot of iOS simulator

...