Как изменить цвет фона на прозрачный в реагирующей навигационной панели - PullRequest
Новая
       23

Как изменить цвет фона на прозрачный в реагирующей навигационной панели

1 голос
/ 07 октября 2019

enter image description here

Привет всем, я пытаюсь добавить ящик реакции-навигации в свое приложение, и я сталкиваюсь с этой проблемой. всякий раз, когда я открываю ящик, фон или фон становятся непрозрачными. Я пытался добавить цвет фона, но у меня не получилось. Вот мой код для боковой панели: - 

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

Пожалуйста, проверьте этот код и помогите мне, если кто-нибудь знает решение. Я хочу сделать фон прозрачным.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Если ваша версия React Navigation V4:

React Navigation 4.x

createDrawerNavigator (RouteConfigs, DrawerNavigatorConfig);

DrawerNavigatorConfig

  • knifeBackgroundColor - Использовать фон Drawer для какого-либо цвета. По умолчанию используется значение 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} />
    });
1 голос
/ 31 октября 2019

Примечание: это относится только к 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

...