Question

我是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>
    );
  }
}

该应用程序未输出任何错误，但出现了带有标题的空白页面。

我希望输出结果像this

谢谢。

Answer 1

反应导航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>
  );
}

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

1 个答案: