如何在 React-Native 中将屏幕从 App.js 导航到第一个屏幕答案

【问题标题】：how to navigate screen from App.js to first screen in React-Native如何在 React-Native 中将屏幕从 App.js 导航到第一个屏幕
【发布时间】：2021-01-25 07:20:54
【问题描述】：

首先对这个非常普通的问题表示抱歉。我是 React-Native 的新手。

我在应用程序中使用了导航，我只是在导航栏上添加了右键从 App.js 注销。该代码：

import React from 'react';
import { StyleSheet, Text, View,SafeAreaView, ScrollView,Button,Alert} from 'react-native';
import PresentationalComponent from './PresentationalComponent'
import List from './List.js'
import Login from './Login.js'
import SignUp from './SignUp.js'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useRoute } from '@react-navigation/native';
const Stack = createStackNavigator();
class App extends React.Component {

constructor(props) {
 super(props);
}
logOutAction(){
  Alert.alert('Done!','Are you sure you want to log-out?',
      [{text: 'Cancel'},{text : 'Yes',onPress: this.done}]
      )
}
done(){
//alert(List.props.navigation.state.routeName)
}
render() {
  return (
  <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Login" component={Login} options={{ title: 'Log-In' }} />
    <Stack.Screen name="SignUp" component={SignUp} options={{ title: 'Sign-Up'}} />
    <Stack.Screen name="List" component={List} options={{ headerLeft:null, headerRight: () => (
        <Button
          onPress={() => this.logOutAction()}
          title="Log-Out"
          color="#000"
        />
      ) } }/>
  </Stack.Navigator>
 </NavigationContainer>
  );
  }
}
export default App;

我的注销按钮操作存在于 App.js 类中。单击注销按钮时如何从 Login.js 启动应用程序？

【问题讨论】：

您是如何管理登录的？您应该根据登录状态有条件地渲染堆栈，请查看reactnavigation.org/docs/auth-flow
@GuruparanGiritharan 谢谢，用户可以从登录屏幕登录，一旦用户成功登录，然后导航到列表屏幕。在 App.js 中，我在列表屏幕的导航右侧添加了“注销”按钮。因此，现在当用户单击该按钮并且其操作存在于 app.js 类中时，我如何在登录屏幕上导航
请查看我的回答
检查同一个兄弟

标签： react-native

【解决方案1】：

要从标题按钮访问导航，您必须执行以下操作

<Stack.Screen name="List" component={List} options={({navigation})=>({ headerLeft:null, headerRight: () => (
        <Button
          onPress={() => this.logOutAction(navigation)}
          title="Log-Out"
          color="#000"
        />
      )})}/>

所以 logoutAction 可以访问您可以使用的导航

logOutAction(navigation){
  Alert.alert('Done!','Are you sure you want to log-out?',
      [{text: 'Cancel'},{text : 'Yes',onPress:()=> this.done(navigation)}]
      )
}
done(navigation){
  navigation.navigate('Login');
}

【讨论】：

感谢您的帮助，我也想要一样！