1

我是本机反应的新手，我在通过 facebook 图收到用户凭据后尝试调用导航器。任何帮助将不胜感激 ：）

所以我有我的第一堂课，它设置了导航器和渲染场景。

class CupofDoom extends Component {
  render() {
    return (
      <Navigator
        style={{ flex: 1 }}
        initialRoute={{ name: 'main' }}
        renderScene={this.renderScene}
      />
    );
  }

  renderScene(route, navigator) {
     if(route.name == 'main') {
       return <Main navigator={navigator}  />
     }
     if(route.name == 'stats') {
       return <Stats navigator={navigator} />
     }
  }
}

上面的代码将自动调用 Main 类。此类“如下所示”包含一个自定义 facebook 登录按钮，该按钮在单击时调用方法“handleFaceBookLogin()”。所以一切正常，直到我尝试运行 this.props.navigator.push({ name: 'stats',}) 它返回，无法读取属性'navigator'。请注意，如果我将 navigator 道具移到 Facebook Manager 登录之外，这将正常工作。 

class Main extends Component {


  handleFacebookLogin(routeName) {


      LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
      function(result) {
        if (result.isCancelled) {
          console.log('Login cancelled');
        } 

        else {
          console.log('Login success with permissions: '
            +result.grantedPermissions.toString());


          const responseInfoCallback = (error, result) => {

                if (error) {
                  console.log(error)
                  console.log('Error fetching data: ' + error.toString());
                } 

                else {
                  test = result; 

                  console.log(test.email);

                  this.props.navigator.push({
                    name: 'stats', // Matches route.name
                  })           

                }
          }//response


          const infoRequest = new GraphRequest(
            '/me',
            {
              parameters: {
                fields: {
                  string: 'picture,email,name,first_name,middle_name,last_name'
                }
              }
            },
            responseInfoCallback
          );

          // Start the graph request.
          new GraphRequestManager().addRequest(infoRequest).start()
      }//else

      },//function result

        function(error) {
          console.log('Login fail with error: ' + error);
        }//functionError
      );//loginManager 


  }

  render() {
    return (
       <Grid>
        <Row size={2} style={styles.row1}>
          <View style={styles.titleHolder}>
              <Text style={styles.welcome}>
                Cup of Doom <Icon active name='ios-cog' style={{color: '#ffffff'}}/>
              </Text>
          </View>
        </Row>
        <Row size={1} style={styles.row2}>
          <View>
            <Icon active name='ios-beer' style={{color: '#333333', fontSize: 100, textShadowColor: '#333333', textShadowOffset: {width: 1, height: 1}}}/>
          </View>
        </Row>
        <Row size={1} style={styles.row3}>
          <View style={styles.fbbutton}>
            <Button bordered light block onPress={this.handleFacebookLogin.bind(this, "stats")}>
              <Icon name="logo-facebook" />
              <Text style={styles.text}>Login with Facebook</Text>
            </Button>
          </View>
        </Row>
      </Grid>
    );
  }
}

我还包括了 Stats 类以供参考。

class Stats extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{email}</Text>

        <TouchableHighlight onPress={()=>{this.props.navigator.pop()}}>
          <Text>BACK</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

我再次非常感谢任何建议/帮助。

4

1 回答 1

3

好的，我实际上设法解决了我自己的问题。

所以我有我的按下动作绑定这个例如

onPress={this.handleFacebookLogin.bind(this, 'test' )}

在我的函数中，我声明了一个全局变量并将其分配给“this”，这将使我能够调用 props.navigator。

处理FacebookLogin（路由名称）{

  var that = this;

  LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
  function(result) {
    if (result.isCancelled) {
      console.log('Login cancelled');
    } 

    else {
      console.log('Login success with permissions: '
        +result.grantedPermissions.toString());


      const responseInfoCallback = (error, result) => {

            if (error) {
              console.log(error)
              console.log('Error fetching data: ' + error.toString());
            } 

            else {
              test = result; 

              console.log(test.email);

              that.props.navigator.push({name: 'stats'})  

            }
      }//response


      const infoRequest = new GraphRequest(
        '/me',
        {
          parameters: {
            fields: {
              string: 'picture,email,name,first_name,middle_name,last_name'
            }
          }
        },
        responseInfoCallback
      );

      // Start the graph request.
      new GraphRequestManager().addRequest(infoRequest).start()
  }//else

  },//function result

    function(error) {
      console.log('Login fail with error: ' + error);
    }//functionError
  )//loginManager

}

于 2017-04-10T20:08:21.630 回答