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

Question

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

HomeScreen - 向用户提供登录选项并导航到 Page2 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
        }


});

导航.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

Answer 1

The reason you are not able to display Page2 is you are directly loading your Navigator in Page2

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

When you are doing this it will navigate to the first screen in your drawer navigator that is Page3 that's the reason you are not able to see the yellow screen. If you really want to show your yellow screen create another screen in stack navigator like this:

Page5: {screen: Page5},

You need to include your DrawerNavigation in page5 like you are doing in page2 and include a button from page2 to navigate to page5.Than you will able to see the yellow screen.

Hope this helps!