React Native - 使用 React Navigation 登录

Question

我的 React 本机应用程序中的登录功能有点吃力。我正在使用 facebook-login，它正在工作。但是成功登录后该怎么做，是我苦苦挣扎的地方。

我试过这个：在 App.js 中拥有两个导航器。一个用于登录，一个用于所有其他。在 app.js 中，我有一个登录状态，默认情况下为 false。然后当登录成功时，我想将 loggedIn-state 更改为 true，并切换到另一个导航器。但是我无法从 LoginStack-navigator 向 App.js-component 发送道具，所以我无法更改 App.js

中的状态

这是我现在的代码：

// App.js
const RootStack = createStackNavigator({
  Single: Single,
  Search: Search,
  Home: Homepage,
  TagsSingle: TagsSingle
},
{
  initialRouteName: 'Home',
  drawerBackgroundColor: '#2D2D2D'
});

const LoginStack = createStackNavigator({
  Login: Login,
},
{
  drawerBackgroundColor: '#2D2D2D',
});

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false
    }
  }
  handleLogin = () => {
    console.log("Test");
    this.setState({loggedIn: true});
  }
  render() {
    return (
      <View style={{flex:1}}>{this.state.loggedIn ? <RootStack /> : <LoginStack handleLogin={this.handleLogin} />}</View>
    );
  }
}

// Login.js - where the login happens
class Login extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      message: 'Logg inn med facebook'
    }
  }
  _fbLogin = (ev) => {
    LoginManager.logInWithReadPermissions(['public_profile']).then(function(result){
      if(result.isCancelled){
        console.log('Login cancelled');
      }
      else{
        console.log('Login succes ' + result.grantedPermissions);
        ev.setState({message: 'Logget inn'});
        ev.props.handleLogin();                // creates error
      }
    }, function(error){
      console.log("An error occured:");
      console.log(error);
    });
  }
  render() {
    return (
      <View style={{ flex:1, backgroundColor: '#2D2D2D', justifyContent: 'center', alignItems: 'center' }}>
        <View>
          <TouchableOpacity onPress={() => {this._fbLogin(this)}}>
            <Text style={{color:'#fff'}}>{this.state.message}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
export default Login;

但是 App.js 中的 HandleLogin 函数没有任何反应，我收到一条错误消息 'ev.props.handleLogin is not a function'（我也尝试过不使用 '()' 调用 prop，这给出了没有错误，但仍然没有反应）。

我该如何解决这个问题？另外，我在这两个导航器的轨道上是否正确？

Answer 1

从他们的文档中尝试这个example。

React Native - 使用 React Navigation 登录

React Native - Login with React Navigation

reactjs

react-native

login

react-navigation

react-native-fbsdk