在我的React-native项目中,我使用了一个Drawer导航。为此,我创建了一个名为HomeDrawer的类。这是以下代码 -
HomeDrawer.js
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
createAppContainer,
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator
} from "react-navigation";
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";
let user_email ='', user_first_name='';
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
console.log(value);
// you will need to handle case when `@ProductTour:key` is not exists
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
console.log(value);
// you will need to handle case when `@ProductTour:key` is not exists
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"@aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = createAppContainer(createDrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
));
export default HomeDrawer;
它与react-navigation版本1.0.0-beta.11完美配合。但在更新到版本3后,它显示以下错误 -
找不到变量DrawerItem
如果我删除了如下所示的标签,那么代码可以工作,但不会显示任何项目作为我在DrawerItem中包含的项目。
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
抽屉切换按钮现在都不起作用。但如果我从左向右拖动屏幕,它就会显示如下图像 -
现在,我想要显示抽屉物品并删除第二张图像中标记的工具栏。所以,如果有人帮助我解决给定代码的问题,那将是非常好的
通过发布与react-navigation 2.18.2一起使用的部分工作示例代码,我将使我的生活变得更轻松(但不是最简单的......)。
不确定它是否会对你有所帮助,但它不会造成任何伤害...... 当然,您不能按原样使用代码,但它可能会对您有所帮助。 您可以忽略它,甚至要求我删除它,无论您做什么都没关系。
import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';
export default createDrawerNavigator({
WelcomeAuth: WelcomeAuthNavigator,
Drawer: MainDrawerNavigator,
Main: MainTabNavigator
}, {
initialRouteName: 'WelcomeAuth',
contentComponent: props => <Drawer {...props} />,
drawerWidth: 180
});
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';
const AuthStack = createStackNavigator({
Login: { screen: LoginScreen },
Signup: { screen: SignupScreen }
}, {
headerMode: 'none',
initialRouteName: 'Login'
});
const WelcomeAuthNavigator = createStackNavigator({
Welcome: Welcome,
Auth: AuthStack
}, {
headerMode: 'none',
initialRouteName: 'Welcome',
contentComponent: props => <Drawer {...props} />
});
export default WelcomeAuthNavigator;
ContactsStack和PhotosStack使用createStackNavigator
定义
const MainTabNavigator = createBottomTabNavigator({
PhotosStack,
ContactsStack
}, {
headerMode: 'none',
headerStyle: { backgroundColor: '#4C3E54' },
headerLeft: <Text onPress={() =>
this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
title: 'Welcome!',
headerTintColor: 'white',
initialRouteName: 'PhotosStack'
});
export default MainTabNavigator;
import { createStackNavigator } from 'react-navigation';
import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';
const MainDrawerNavigator = createStackNavigator({
Help: { screen: Help },
About: { screen: About }
}, {
initialRouteName: 'About'
});
export default MainDrawerNavigator;
import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
Button, Icon, Body, Thumbnail } from "native-base";
const listItems = [
{ title: "Help", route: "Help", icon: "md-help" },
{ title: "About", route: "About", icon: "ios-information-circle-outline" }
];
class Drawer extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container>
<Content contentContainerStyle={{
justifyContent: 'flex-start', marginTop: 30
}}>
{this.renderUserPetDetails.bind(this)()}
<List
dataArray={listItems}
renderRow={data => {
return (
<ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
<Left>
<Button onPress={() => this.props.navigation.navigate(data.route)}
style={{ backgroundColor: "#888" }}>
<Icon active name={data.icon} />
</Button>
</Left>
<Body>
<Text
style={{ fontSize: 14, fontWeight: '600' }}>
{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
</Content>
</Container>
</SafeAreaView>
);
}
}
您试图调用DrawerItems而不实际导入它因此错误。确保添加以下行:
import { DrawerItems } from 'react-navigation';