如何在入口点文件中使用 React Native 导航（当组件位于 NavigationContainer 外部时，React Native 导航不起作用）

Question

我真的很抱歉这个问题的标题这么长，但我对此很困惑。

我已经使用 React Native 登录页面大约 10 天了，在完成所有服务器端逻辑之后，是时候提供通过令牌登录的功能了。

所以我当前的问题是我可以在属于 和 的所有组件中使用 navigation.navigate()。

对于我的登录页面，我设计了一个函数来根据存储的令牌对它们进行身份验证。此功能有效，但在调用它并获得所需的响应后，我希望将它们移动到应用程序的主屏幕。

const Stack = createNativeStackNavigator();

export default function App({navigation}) {
  

  async function validate(){
   
   let key =await getKey('token')
   let retval = await Http.post('/verify',{token:key})
   return retval.status

  } 

 validate().then(function(value){
  if(value==215){
  }
 }).catch(function(error){
  console.log(error)
 })

  navigation.navigate('Home')

  return (
      <NavigationContainer>
           <Stack.Navigator >
              <Stack.Screen
                options={{headerShown: false}}
                name='Login'
                component={Login}
              />
               <Stack.Screen
                name='Sign-up'
                component={Signup}
              />
              <Stack.Screen
              
                options={{headerShown: false}}
                name='Home'
                component={Home}
              />
            </Stack.Navigator>
      </NavigationContainer>
 
  );
}

所以这段代码会导致未定义的属性错误，但我主要是要求一个从封装组件进行导航的解决方案。

Answer 1

您可以使用传递参数来进行路线导航

  <Stack.Screen
                options={{headerShown: false}}
                name='Home'
                component={Home}
                initialParams={{key}}
/>

并得到

const Home =({})=>{
  const {key} = route?.params}

https://reactnavigation.org/docs/params/