Question

大家好，我正在尝试在我的应用程序中添加react-navigation-drawer，而我正面临着这个问题。每当我打开抽屉时，背景或背景就会变成不透明的黑色。我尝试添加背景色，但对我不起作用。这是我的侧边栏代码：-

import { Text, TouchableOpacity, View,StyleSheet, ScrollView, Dimensions,BackHandler} from "react-native";
import Icon from 'react-native-vector-icons/Entypo';
const { width, height } = Dimensions.get("window");
const window = Dimensions.get("window");
let h = window.height / 812;
let w = window.width / 375;
let p = (h + w) / 2;

export default class SideBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: true,
            index: '',
        }
    }

    componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    hardwareBackPress() {
        this.props.navigation.closeDrawer();
    }

    navigate(location) {
        this.props.navigation.closeDrawer();
        this.props.navigation.navigate(location);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.headerSection, { flexDirection: 'row', padding: 10, }]} >
                    <View style={{ alignItems: 'center', height: p * 90, width: p * 90, marginTop: p * 10, borderColor: '#fff', borderWidth: 4, borderRadius: p * 90, elevation: 2 }}>
                        <Icon name="home" size={20} color={tintColor} />
                    </View>
                    <View style={{ width: '70%', marginTop: p * 15, justifyContent: 'center' }}>
                        <Text style={{ width: '100%', textAlign: "center", fontSize: 16, marginTop: 10, fontWeight: 'bold' }}>{this.state.uname}</Text>
                    </View>
                </View>

                <View>
                    <ScrollView style={{ height: '100%', marginTop: 20 }}>

                        <TouchableOpacity
                            style={styles.container}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}>Edit Profile</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>
                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}>My Account</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}
                            onPress={() => this.navigate("HelpText")}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}> Help </Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}
                            onPress={() => this.navigate("Notificationalert")}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}> Notification </Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}
                            onPress={() => this.navigate("Support")}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}>Support</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}
                            onPress={() => this.navigate("AboutUs")}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}>About</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={styles.container}>
                            <View style={styles.textView}>
                                <View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}>
                                    <Icon name="home" size={20} color={tintColor} />
                                </View>

                                <View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}>Sign_Out</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </ScrollView>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#ffffffff",
        flex: 1,
    },
    textView: {
        flex: 1,
        flexDirection: 'row',
    },
    headerSection: {
        backgroundColor: '#f5f5f5', 
        height: height / 6,
        borderBottomColor: '#e6e6e6', 
        borderBottomWidth: 2,
    },
    textInput: {
        marginTop: 10,
        fontSize: p * 16,
        height: p * 40,
        paddingHorizontal: p * 10,
        borderWidth: 2,
        borderRadius: 3
    },
    scrollView: {
        zIndex: 0,
        width: width,
    }
});

这是我的导航器，其中添加了Drawernavigator。

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer';
import React from 'react';
import HomeScreen from './src/Dashboard'
import OtherScreen from './src/Screen2'
import AuthLoadingScreen from './src/LoadingScreen'
import SignInScreen from './src/Login'
import SignUpScreen from './src/Signup'
import ForgetPassword from './src/Forget'
import SideMenu from './utils/Sidebar'

const AppStack = createDrawerNavigator(
    {
        Home: { screen: HomeScreen },
        Other: { screen: OtherScreen },
    },
    {
        headerMode: 'screen',
        navigationOptions: ({ navigation }) => ({
            gesturesEnabled: false,
            swipeEnabled: false,
            drawerLockMode: 'locked-closed',
            headerStyle: { backgroundColor: '#fff' }
        }),
        drawerPosition: 'right',
        contentComponent: (props) => <SideMenu {...props} />
    });

const AuthStack = createStackNavigator({ SignIn: SignInScreen, SignUp: SignUpScreen, Forget: ForgetPassword }, {
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
});

export default createAppContainer(
    createSwitchNavigator(
        {
            AuthLoading: AuthLoadingScreen,
            App: AppStack,
            Auth: AuthStack,
        },
        {
            initialRouteName: 'AuthLoading',
        }
    )
);

请检查此代码，如果有人知道解决方案，请帮助我。我想使背景透明。

谢谢。

Answer 1

    const MainStack = createDrawerNavigator(
  {
    Home: homeScreen,
    AddCard: addCardScreen,
    AddProduct: addProductScreen,
    Detail: detailScreen,
    Notification: notificationsScreen,
    Products: productsScreen,
    Profile: profileScreen,
    Service: serviceScreen,
  },
  {
    contentComponent: () => <SideBar />,
    initialRouteName: "Home",
    overlayColor: 'transparent'
  }
);

Answer 2

注意：这仅适用于react-navigation 3.*.*

createDrawerNavigator第二个参数（类型为DrawerNavigatorConfig）具有属性overlayColor。可以使用字符串（"#FFF"或"rgba(0, 0, 0, 0.7)"）将其设置为任何纯色。

自己寻找并在类型定义文件https://github.com/react-navigation/react-navigation/blob/v3.13.0/typescript/react-navigation.d.ts#L1056

中进行挖掘

Answer 3

如果您的React Navigation版本是V4：

反应导航4.x

createDrawerNavigator（RouteConfigs，DrawerNavigatorConfig）;

DrawerNavigatorConfig

drawerBackgroundColor -将“抽屉”背景用于某种颜色。的默认值为white。

用法

const AppStack = createDrawerNavigator(
    {
        Home: { screen: HomeScreen },
        Other: { screen: OtherScreen },
    },
    {
        headerMode: 'screen',
        navigationOptions: ({ navigation }) => ({
            gesturesEnabled: false,
            swipeEnabled: false,
            drawerLockMode: 'locked-closed'
        }),
        drawerBackgroundColor : 'transparent' // or 'rgba(0,0,0,0)'
        drawerPosition: 'right',
        contentComponent: (props) => <SideMenu {...props} />
    });

如何在反应导航抽屉中将背景色更改为透明

3 个答案:

DrawerNavigatorConfig