屏幕没有在本机反应中导航。

Question

我有一个登录屏幕，然后我从那里导航到主屏幕，主屏幕上有4个字母按钮，Ch-1，Ch-2和Ch-3，通过按下每个按钮，我可以很容易地导航到正确的屏幕，但是在Alphabet屏幕中，我有另外两个按钮学习和测试，但是当我按下这些按钮时，我不能导航到相应的屏幕，而且没有错误。我猜它的嵌套导航。对一个专家来说，我可能听起来很蠢:)但是我是新来的(从零开始)对本地和导航的反应，我真的不知道该怎么做！如果有人帮忙的话，你会很感激的！

守则如下：

这是我的home.js (它在文件夹屏幕中)：

import React from "react";
import {View, StyleSheet, Text} from 'react-native';
import { TouchableOpacity } from "react-native-gesture-handler";
import { Auth } from "../services";

export default home =({navigation}) => {
    return (
        <View style={styles.body}>
            <Text style={styles.toptext}>
                Merheba!
            </Text>

        

            <TouchableOpacity onPress={() => navigation.navigate('alphabets')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Alphabets</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => navigation.navigate('ch1')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Chapter 1</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => navigation.navigate('ch2')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Chapter 2</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => navigation.navigate('ch3')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Chapter 3</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => Auth.signOut()}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Sign Out</Text>
            </TouchableOpacity>

        </View>
    )
}

这是屏幕文件夹中的index.js：

export {default as home} from './home';

export {default as login} from './login';
export {default as forgotp} from './login';
export {default as signup} from './signup';
export {default as alphabets} from './alphabets';
export {default as alphl} from './alphl';
export {default as alpht} from './alpht';
export {default as ch1} from './ch1';
export {default as ch2} from './ch2';
export {default as ch3} from './ch3';

这是屏幕文件夹中的alphabets.js：

import { NavigationContainer } from "@react-navigation/native";
import React from "react";
import {View, StyleSheet, Text} from 'react-native';
import { TouchableOpacity } from "react-native-gesture-handler";


export default alphabets =({navigation}) => {
    return (

       

        <View style={styles.body}>
       

            <Text style={styles.toptext}>
                Merheba!
            </Text>

            <TouchableOpacity onPress={() => navigation.navigate('alphl')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Learning Sheet</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => navigation.navigate('alpht')}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Give Test</Text>
            </TouchableOpacity>


        </View>
    )
}

来自导航文件夹的AppNavigation.js：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import home from '../screens/home';
import alphabets from '../screens/alphabets';
import ch1 from '../screens/ch1';
import ch2 from '../screens/ch2';
import ch3 from '../screens/ch3';



const stack=createStackNavigator();

export default AppNavigator =  () => {
    return(
    <stack.Navigator
        screenOptions={{
            headerShown: null
        }}
    >
        <stack.Screen name="home" component={home} />
        <stack.Screen name="alphabets" component={alphabets} />
        <stack.Screen name="ch1" component={ch1}/>
        <stack.Screen name="ch2" component={ch2} />
        <stack.Screen name="ch3" component={ch3} />
        

    </stack.Navigator>
       
    )  
}

来自导航文件夹的AlphNavigator.js：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import alphl from '../screens/alphl';
import alpht from '../screens/alpht';

const stack=createStackNavigator();
 
export default AlphNavigator = () => {
    return(
    <stack.Navigator
        screenOptions={{
            headerShown: null
        }}
    >
        <stack.Screen name="alphl" component={alphl} />
        <stack.Screen name="alpht" component={alpht} />
       
        

    </stack.Navigator>
       
    )  
}

&最后，导航文件夹中的index.js：

import React, {useState, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import  AppNavigator  from './AppNavigator';
import AuthNavigator  from './AuthNavigator';
import auth from '@react-native-firebase/auth';

export default AppContainer = () => {

     // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);
  if (initializing) return null;


  return(
      <NavigationContainer>
          {user ? <AppNavigator/>  : <AuthNavigator/>}
      </NavigationContainer>


      
  )
}

Answer 1

您没有在"AlphNavigator“中定义"AppNavigator”。

您应该在AppNavigator中这样做：

export default AppNavigator =  () => {
return(
<stack.Navigator
    screenOptions={{
        headerShown: null
    }}
>
    <stack.Screen name="home" component={home} />
    <stack.Screen name="alphabets" component={alphabets} />
    <stack.Screen name="alph" component={ AlphNavigator } /> /*here add your AlpNavigator*/
    <stack.Screen name="ch1" component={ch1}/>
    <stack.Screen name="ch2" component={ch2} />
    <stack.Screen name="ch3" component={ch3} />

</stack.Navigator>
)}

在这种情况下，您没有任何错误，这是正常的，因为如果不存在屏幕，React导航不会将您标记为错误。

如果您使用的是TypeScript，则可以解决上述问题。

因此，为了访问嵌套的导航屏幕，您应该使用：

navigation.navigate('alph', { screen: 'alphl' })

第一个参数是堆栈导航的名称，第二个参数是带有屏幕名称的对象，该对象位于这个嵌套导航的内部。