Question

我对本机响应非常陌生，这是我的组织给我的第一个应用程序，可以为我做一个PoC。

我的要求是我必须使用登录屏幕----->导航抽屉（1）屏幕名称-workProcessor和2）Operation Analytics）

我能够在2个不同级别实现屏幕显示

即我能够设计“登录”屏幕，并且能够设计工作处理器和操作分析屏幕并在它们之间进行切换

我无法集成我的登录屏幕，单击登录后，我应该导航到导航抽屉屏幕

我的文件是：

Login.js

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

import Logo from './Logo';
import Form from './Form';

export default class Login extends React.Component {

    render() {
        return (

            <View style={styles.container}>
                <Logo></Logo>
                <Form type = "Login"></Form>
                <View style ={styles.workSpaceText}>
                    <Text style = {styles.workSpaceText}> Change WorkSpace ?</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#455a64',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    workSpaceText: {
        flexGrow:1,
        justifyContent:'center',
        alignItems:'center',
        
    },

    workSpaceText: {
        fontSize: 15,
        marginVertical:15,
        color: 'rgba(255,255,255,0.7)'
    }
});

Form.js

import React from 'react';
import { StyleSheet, TextInput, View, Image, TouchableOpacity, Text } from "react-native";
import { useNavigation } from '@react-navigation/native';
// import { Actions } from 'react-native-router-flux';

const Form = () => {
    const navigation = useNavigation();

    loginMove= ()=>{
        
        navigation.navigate('Landing');
    
    } 
      
    return (
        <View style={styles.container}>
            <TextInput style={styles.inputBox}
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholder="Username"
                placeholderTextColor='#ffffff'
            />
            <TextInput style={styles.inputBox}
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholder="Password"
                placeholderTextColor='#ffffff'
            />

            <TouchableOpacity style={styles.button} onPress={loginMove}>
                <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
        </View>
    );


}

export default Form;

const styles = StyleSheet.create({
    container: {
        flexGrow: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    inputBox: {
        width: 300,
        backgroundColor: 'rgba(255,255,255,0.5)',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize: 16,
        color: '#ffffff',
        marginVertical: 10
    },
    button: {
        width: 300,
        backgroundColor: '#1c313a',
        borderRadius: 25,
        marginVertical: 20,
        paddingVertical: 12
    },

    buttonText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#ffffff',
        textAlign: 'center'
    }
});

和我的抽屉文件即LandingScreen.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';

// import { Router, Stack, Scene } from 'react-native-router-flux';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { createDrawerNavigator } from '@react-navigation/drawer';
import WorkProcessor from './workprocessor';
import OperationAnalytics from './OperationAnalytics';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const NavigationDrawerStructure = (props) => {
  //Structure for the navigatin Drawer
  const toggleDrawer = () => {
    //Props to open/close the drawer
    props.navigationProps.toggleDrawer();
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={() => toggleDrawer()}>
        {/*Donute Button Image */}
        <Image
          source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png' }}
          style={{ width: 25, height: 25, marginLeft: 5 }}
        />
      </TouchableOpacity>
    </View>
  );
}


function firstScreenStack({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="FirstPage">
      <Stack.Screen
        name="FirstPage"
        component={WorkProcessor}
        options={{
          title: 'Work-Processor', //Set Header Title
          headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
          headerStyle: {
            backgroundColor: '#f4511e', //Set Header color
          },
          headerTintColor: '#fff', //Set Header text color
          headerTitleStyle: {
            fontWeight: 'bold', //Set Header text style
          },
        }}
      />
    </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack.Navigator
      initialRouteName="SecondPage"
      screenOptions={{
        headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
        headerStyle: {
          backgroundColor: '#f4511e', //Set Header color
        },
        headerTintColor: '#fff', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        }
      }}>
      <Stack.Screen
        name="SecondPage"
        component={OperationAnalytics}
        options={{
          title: 'Operational Analytics', //Set Header Title

        }} />

    </Stack.Navigator>
  );
}
const LandingScreen = () => (

  <NavigationContainer>
   <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: { marginVertical: 5 },
        }}>
        <Drawer.Screen
          name="FirstPage"
          options={{ drawerLabel: 'Work-Processor' }}
          component={firstScreenStack} />
        <Drawer.Screen
          name="SecondPage"
          options={{ drawerLabel: 'Operation-Analytics' }}
          component={secondScreenStack} />
      </Drawer.Navigator>
  </NavigationContainer>

);


export default LandingScreen;

当我单击登录按钮即loginMove ..时，它没有移至导航抽屉屏幕并显示错误：-

错误：看来您已经在另一个嵌套了“ NavigationContainer”。通常，您在应用程序的根目录仅需要一个容器，因此这可能是一个错误。如果这是故意的，请显式传递“ independent = {true}”。请注意，这将使子导航器与父导航器断开连接，并且您将无法在它们之间导航。

请有人帮我完成此流程。我已经准备好进行任何代码更改，这是我的PoC

Answer 1

您不能嵌入NavigationContainer，只能嵌入纸叠，抽屉，标签等

我建议您进行两个导航，一个用于登录，一个已登录。这样可以防止已经登录的人返回登录屏幕。

示例

// App.js
return(
    <NavigationContainer>
        {isLogged ? <LoggedNav /> : <LoginNav />}
    </NavigationContainer>
)

将您的抽屉放入LoggedNav，将堆栈放入LoginNav

OR

在第一个堆栈中，您有一个包含抽屉堆栈的屏幕，一个包含着陆页堆栈的屏幕。您可以根据需要嵌入堆栈，但不能嵌入NavigationContainer。屏幕可以是没有问题的堆栈。

function Login({ navigation }) {
    return (
      <Stack.Navigator initialRouteName="FirstPage">
        <Stack.Screen
          name="FirstPage"
          component={WorkProcessor}
          options={{
            title: 'Work-Processor', //Set Header Title
            headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
    );
  }

const LandingScreen = () => (
     <Drawer.Navigator
          drawerContentOptions={{
            activeTintColor: '#e91e63',
            itemStyle: { marginVertical: 5 },
          }}>
          <Drawer.Screen
            name="FirstPage"
            options={{ drawerLabel: 'Work-Processor' }}
            component={firstScreenStack} />
          <Drawer.Screen
            name="SecondPage"
            options={{ drawerLabel: 'Operation-Analytics' }}
            component={secondScreenStack} />
        </Drawer.Navigator>
);

return(
    <NavigationContainer>
        <Stack.Navigator initialRouteName="login">
            <Stack.Screen name="login" component={Login} ... />
            <Stack.Screen name="landing" component={LandingScreen} ... />
        </Stack.Navigator>
    </NavigationContainer>
)

从登录屏幕导航到Drawer.Navigator第一个屏幕无法从一个屏幕导航到抽屉导航

1 个答案: