Question

我在本机应用程序的登录功能方面有些挣扎。我正在使用Facebook登录，并且正在运行。但是成功登录后该怎么办呢？

我已经尝试过了：在App.js中有两个导航器。一种用于登录，另一种用于所有其他。在app.js中，我有一个LoggedIn状态，默认情况下为false。然后，当登录成功时，我想将loggingIn-state更改为true，并交换到另一个导航器。但是我无法从LoginStack导航器向App.js组件发送支持，因此无法更改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不是函数”（我也尝试了不使用'（）'调用prop，没有错误，但仍然没有反应）。

我该如何解决？另外，我在这两个导航员之间是否走在正确的轨道上？

Answer 1

从他们的文档中试用example。

React Native-使用React Navigation登录

1 个答案: