Question

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

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

我的问题：我看不到第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: 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

无法显示Page2的原因是您直接在Page2中加载了导航器

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

执行此操作时，它将导航到抽屉式导航器中的第一个页面，即Page3，这就是您无法看到黄色屏幕的原因。如果您确实要显示黄色屏幕，请在堆栈导航器中创建另一个屏幕，如下所示：

Page5: {screen: Page5},

您需要像在第2页中一样在第5页中包含DrawerNavigation，并在第2页中包含一个按钮以导航到第5页。然后您将看到黄色屏幕。

希望这会有所帮助！

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

1 个答案: