繁体   English   中英

如何使用react-navigation v3在react-native中的native-base中正确实现Drawer

[英]How to correctly implement Drawer in native-base in react-native using react-navigation v3

我是 react-native 的新手,我会喜欢使用 react native 堆栈导航在 native-base 中正确实现 Drawer。 我很抱歉我的问题可能太基本了。 我只需要正确的方法来实现它。

下面是我的App.js

import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import FirstScreen from './src/FirstScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';

import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
  DrawerItems
} from 'react-navigation';

const DrawerContent = (props) =>(

  <View style={{backgroundColor:'red'}}>
    <View style={{
      backgroundColor:'#f50057',
      height:140,
      alignItems: 'center',
      justifyContent:'center'
    }}>
    <Text style={{color: 'white',fontSize:30}}>
      Header
    </Text>
    </View>
    <DrawerItems/>
  </View>
);

const HomeScreenRouter = createDrawerNavigator(
  {
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
    Screen3: { screen: Screen3 },
  },
  {
    contentComponent: <DrawerContent/>,
  }
);

const AuthStack = createStackNavigator(
  {
    FirstScreen: FirstScreen
  }
);

const AppContainer = createAppContainer(createSwitchNavigator(
  {
    App: HomeScreenRouter,
    Auth: AuthStack
  },{
    initialRouteName: 'Auth',
  }
));

export default class App extends Component{
  constructor(props){
    super(props)
    this.state = {
      isReady: false
    }
  }
  async componentDidMount(){
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    }).then((err) =>{
      this.setState({ isReady: true });
    })

  }

  render(){
    if(!this.state.isReady){
      return(
        <AppLoading/>
      )
    }

    return(
      <AppContainer/>
    )
  }
}

下面是我的FirstScreen.js

import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';


export default class FirstScreen extends Component{
  constructor(props){
    super(props);
    this.state = {
      isReady: false
    }
  }
  render(){
    if(!this.state.isReady){
      return(
        <AppLoading/>
      )
    }
    return (
      <Container>
        <Header>
        <Left>
            <Button transparent onPress={() this.props.navigation.openDrawer() }>
             <Icon name="menu"/>
            </Button>
        </Left>
        <Body>
           <Title>Be in</Title>
        </Body>
        <Right/>
        </Header>
              <Content>

              </Content>
      </Container>
    );
  }
}


该应用程序没有输出任何错误,但我得到了一个带有标题的空白页。

我希望输出像这样

提前致谢。

react-navigation v5 的简单解决方案

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStackNavigator} from '@react-navigation/stack';
// screens
import HomeScreen from '../screens/HomeScreen';
import CategoryScreen from '../screens/CategoryScreen';
import CartScreen from '../screens/CartScreen';
import MapScreen from '../screens/MapScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

function MainStackNavigator() {
  return (
    <Stack.Navigator headerMode="none" initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Cart" component={CartScreen} />
      <Stack.Screen name="Category" component={CategoryScreen} />
      <Stack.Screen name="Map" component={MapScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function AppRouter() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MainStackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM