react-native：facebook内のナビゲータを呼び出せませんLoginManager function

Question

私はネイティブに反応するのが新しく、Facebookのグラフからユーザーの資格情報を受け取った後にナビゲータを起動しようとしています。任意の助けが大いに感謝されるでしょう:)

私はナビゲータとrenderSceneを設定する私の最初のクラスがあります。

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クラスを呼び出します。このクラスには、カスタムフェイスブックのログインボタンがあり、このボタンをクリックするとメソッドhandleFaceBookLogin（）が呼び出されます。だから私は試してみるまで、これは正常に動作しますthis.props.navigator.push（{name： 'stats'、}）それが返す、プロパティ 'ナビゲータ'を読み取ることはできません。 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> 
    ); 
    } 
} 

もう一度アドバイスをお願いします。

Answer 1

私は実際に私自身の質問を解決することができました。

だから、私は私の機能の中で、この例

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

をバインドするプレスアクションの私は、グローバル変数を宣言してからprops.navigatorを呼び出すために私を可能になる、「この」に割り当てています。

handleFacebookLogin（routeName）{

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  

}