如何在 react-navigation-drawer 中将背景颜色更改为透明
How to change backdrop color to transparent in react-navigation-drawer
大家好，我正在尝试在我的应用程序中添加 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',
}
)
);
请检查此代码，如果有人知道解决方案，请帮助我。
我想让背景透明。
提前致谢。
注意：这仅适用于 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
如果您的 React Navigation 版本是 V4：
React 导航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} />
});
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'
}
);
大家好，我正在尝试在我的应用程序中添加 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',
}
)
);
请检查此代码，如果有人知道解决方案，请帮助我。 我想让背景透明。
提前致谢。
注意：这仅适用于 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
如果您的 React Navigation 版本是 V4：
React 导航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} />
});
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'
}
);