Question

我在反应导航方面遇到了一些麻烦

import React, {useState,useEffect} from 'react';
import {Image} from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from "./src/screens/Home.js";
import InvitePage from './src/screens/InvitePage.js';
import WelcomePage from './src/screens/WelcomePage.js';
import NamePage from './src/screens/NamePage.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Stack = createStackNavigator();

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require("./assets/Appicon.png")}
    />
  );
}

function App() {
  const [userName,setuserName]=useState(null);
  const [loading, setLoading] = useState(true)

    useEffect(() => { 
      async function getName(){
              try {
                const result= await AsyncStorage.getItem('namekey')
                setuserName(result);
                setLoading(false);
              }
              catch(e) {
                setLoading(false);
              } 
        }
      getName();
    }, []);

    if (loading) {
      return (
        <></>
      )
    }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {userName ? 
        (<Stack.Screen name="Home" component={Home} 
        options={{
          headerTitle: props => <LogoTitle {...props} /> ,
          headerStyle: {
            height: 120,
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}/>):(
          <>
        <Stack.Screen name="WelcomePage" component={WelcomePage} 
        options={{ 
          title: 'Welcome',
          headerStyle: {backgroundColor:'#fff',height: 100 },
      }}
        />
        <Stack.Screen name="NamePage" component={NamePage} 
        options={{ 
          title: 'Welcome',
          headerStyle: {backgroundColor:'#fff',height: 100 },
      }}
      
        />
         </>
         )}
        <Stack.Screen name="InvitePage" component={InvitePage} 
        options={{ 
          title: 'Invite',
          headerStyle: {backgroundColor:'#fff',height: 100 },
      }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这是我的 app.js.Here，我正在使用异步存储读取文件，然后我根据要导航到的屏幕决定，但问题是当我转到我的名称设置页面并保存异步存储的名称由于某种原因我无法导航到主页我收到此错误：

The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.

Do you have a screen named 'Home'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

我想也许主页没有在这段代码中初始化？这是我的名字页面：

async function next(){
    try {
      await AsyncStorage.setItem('namekey', name)
      console.log("done")
    } catch (e) {
      console.log("errorNamePage")
    }
    navigation.navigate("Home");
  }


return(

  <View style={styles.headerview}>
    <Text style={{fontSize:30,marginTop:250,fontFamily:"AzoSans-Medium",marginLeft:30,marginRight:30}}>Please enter your name</Text>
    <TextInput
        style={styles.input}
        placeholder="Name"
        onChangeText={name => setName(name)}
        defaultValue={name}
        onSubmitEditing={()=>next()}
        autoCorrect = {false}
      />
    <TouchableOpacity style={{marginTop: 150}} onPress={()=> next()}>
    <Image source={require('../../assets/welcome-next.png')} style={{width:100, height: 100,marginLeft:150}} />
    </TouchableOpacity>
  </View>
  );

  };

Answer 1

您在 navigator 中使用的条件可能将 NamePage 和 Home 分开，因此我猜它们彼此不可访问。进入 Name 页面后，userName 必须是一个真值才能导航到 Home

如果你更多地讲述你的意图，这里的人可以向你展示一个更简单的解决方案。

无法导航到另一个屏幕

1 个答案: