使用 createDrawerNavigator v5 刷新 React-Native 屏幕导航

Question

我正在尝试使用 react-native 构建一个 android 应用程序。这是我的布局：

HomeScreen - 向用户显示登录选项并导航至第 2 页 Page2（黄色）- 提供抽屉式菜单以导航至第 3 页（搜索页）或第 4 页（添加页） Page3（红色）- 提供红色背景和文本的视图 Page4（颜色为绿色（ - 提供具有绿色背景和文本的视图

我的问题：我没有看到第 2 页（黄色屏幕） ** 成功登录后，主屏幕自动导航到第 2 页，但没有显示第 2 页（黄色），而是显示带有滑块菜单的红色页面，如果我选择带有滑块菜单的第 4 页（绿色）。

为了清楚起见，请查看附件图片（注意：即使正在呈现滑块菜单，我也看不到第 2 页）

我的代码：

APP.JS

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {View, Text} from 'react-native';

import HomeScreen from './pages/HomeScreen';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import Page4 from './pages/Page4';


const App = createStackNavigator({

Home: {screen: HomeScreen},
Page2 : {screen: Page2},
Page3: {screen: Page3},
Page4: {screen: Page4},

},
{
    initialRouteName: 'Home',
}
);

export default createAppContainer(App);

HomeScreen.js


import React, {Component} from 'react';
import {ImageBackground, StyleSheet,TextInput, Button,  View, Text} from 'react-native';

export default class HomeScreen extends Component {

  static navigationOptions ={
    title: "HomeScreen"
  };

  constructor(props)
  {
    super(props);
    this.state = {
        login : false

    }
  }

  ConfirmLogin =  () =>
  {

    const {navigate} = this.props.navigation;
    this.setState({login : true});
    console.log("Confirm Login");

    if (this.state.login == true)
    {
      console.log("State is set");
      navigate('Page2');
    }
  }

  render()
  {



          return (


            <View style={styles.container}>
            <Text style = {styles.companyName}> HomeScreen </Text>



                    <View style = {styles.InputContainer}>

                        <TextInput style = {styles.login}
                            underlineColorAndroid = "black"
                            placeholder = "username"
                            autoCapitalize = "none"
                            autoCapitalize = "none"
                            placeholderTextWeight = "bold"
                        />
                        <TextInput style = {styles.login}
                            underlineColorAndroid = "black"
                            placeholder = "password"
                            autoCapitalize = "none"
                            secureTextEntry = {true}

                        />

                        <Button
                            onPress = {this.ConfirmLogin}
                            title = "Submit"
                            color = "blue"
                         />
                    </View>




            </View>



          );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#87CEEB',
        flexDirection: 'column',

    },

    image: {
        flex: 1,
        resizeMode: 'cover',
        justifyContent: 'center',
    },
    companyName: {
        color : 'grey',
        fontSize : 50,
        justifyContent : 'center',
        fontWeight : 'bold'
    },

    InputContainer: {
        height : 120,
        width : 320,
        backgroundColor : 'rgba(0,0,0,0)',
        color : 'white'
    }

})

Page2.JS


import React, {Component} from 'react';
import {StyleSheet,Button, View, Text} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {DrawerNavigator, createAppContainer} from 'react-navigation';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import DrawerNavigation from './Navigation';



export default class Page2 extends Component{

    render()
    {

        return(


            <View style={styles.container}>
                <DrawerNavigation/>
            </View>






        );
    }

}

const styles = StyleSheet.create({

container: {
            flex: 1,
            backgroundColor: 'yellow',
            flexDirection: 'column',

        },

})

Page3.js


import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';

export default class Page3 extends Component
{

    render()
    {
        return(

            <View style = {styles.container}>
                    <Text> Search Parts </Text>

            </View>


        );
    }

}

const styles = StyleSheet.create ({
    container: {
            flex: 1,
            backgroundColor: 'red',
            flexDirection: 'column',

        },
        input: {
            margin: 15,
            height: 40,
            borderColor: '#7a42f4',
            borderWidth: 1
        }


});

Page4.js


import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';

export default class Page4 extends Component
{

    render()
    {
        return(

            <View style = {styles.container}>
                    <Text> Add Product Screen </Text>

            </View>


        );
    }

}

const styles = StyleSheet.create ({
    container: {
            flex: 1,
            backgroundColor: 'green',
            flexDirection: 'column',

        },
        input: {
            margin: 15,
            height: 40,
            borderColor: '#7a42f4',
            borderWidth: 1
        }


});

Navigation.js


import React, {Component} from 'react';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

const drawer = createDrawerNavigator();

function DrawerNavigation(){

    return(
        <NavigationContainer>
            <drawer.Navigator>
                <drawer.Screen name='Page 3' component={Page3}/>
                <drawer.Screen name="Page 4" component={Page4}/>
            </drawer.Navigator>
        </NavigationContainer>
    );

}

export default DrawerNavigation

Answer 1

您无法显示第 2 页的原因是您直接在第 2 页中加载导航器

   <View style={styles.container}>
                <DrawerNavigation/>
            </View>

执行此操作时，它将导航到抽屉导航器中的第一个屏幕，即第 3 页，这就是您看不到黄色屏幕的原因。如果你真的想显示你的黄色屏幕，请像这样在堆栈导航器中创建另一个屏幕：

Page5: {screen: Page5},

您需要像在 page2 中一样在 page5 中包含 DrawerNavigation，并在 page2 中包含一个按钮以导航至 page5.Than 您将能够看到黄色屏幕。

希望对您有所帮助！

使用 createDrawerNavigator v5 刷新 React-Native 屏幕导航

React-Native Screen Navigation Refresh with createDrawerNavigator v5

react-native-android