使用createDrawerNavigator v5进行本机屏幕导航刷新

Question

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

HomeScreen-向用户显示登录选项并导航到Page2Page2（黄色）-提供一个抽屉菜单，可导航到第3页（搜索页）或第4页（添加页）Page3（红色）-提供具有红色背景和文本的视图第4页（绿色（-为视图提供绿色背景和文本）>

我的问题

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

[为清楚起见，请参阅附件中的图像（注意：即使正在渲染滑块菜单，我也看不到页面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: AppMenu},
Page3: {screen: SearchPart},
Page4: {screen: AddProduct},

},
{
    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

我正在尝试使用react-native构建一个Android应用。这是我的布局：HomeScreen-向用户显示登录选项并导航到Page2 Page2（黄色）-提供抽屉式菜单至...

Answer 1

您已创建导航并添加了尚未创建的屏幕