2017-04-07 45 views
0

我是新來對本機做出反應,我試圖通過facebook圖表收到用戶憑據後調用導航器。任何幫助將不勝感激:)react-native:無法在Facebook內部調用導航器LoginManager函數

所以我有我的第一個類,它設置了導航器和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類。這個類'如下所示'包含一個自定義Facebook登錄按鈕,點擊時調用方法'handleFaceBookLogin()'。所以一切正常,直到我嘗試運行它返回的this.props.navigator.push({name:'stats',}),無法讀取屬性'navigator'。請注意,如果我在Facebook管理器登錄之外移動導航器支柱,這可以正常工作。

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> 
    ); 
    } 
} 

再次,我會很感激任何意見/幫助。

回答

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  

}