react-native: unable to invoke navigator within facebook LoginManager function -
i new react native , i'm trying invoke navigator after have received user credentials via facebook graph. appreciated :)
so have first class sets navigator , 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} /> } } } the code above automatically invoke class main. class 'as seen below' contains custom facebook login button invokes method 'handlefacebooklogin()' when clicked. works fine until try , run this.props.navigator.push({ name: 'stats',}) returns, cannot read property 'navigator'. note works fine if move navigator prop outside of facebook manager login.
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 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 graph request. new graphrequestmanager().addrequest(inforequest).start() }//else },//function result function(error) { console.log('login fail 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 facebook</text> </button> </view> </row> </grid> ); } } i've included stats class reference.
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> ); } } again appreciate advice / help.
ok managed solve own question.
so have on press action binds eg
onpress={this.handlefacebooklogin.bind(this, 'test' )} within function declare global variable , assign 'this', enable me invoke props.navigator.
handlefacebooklogin(routename) {
var = this; loginmanager.loginwithreadpermissions(['public_profile', 'email', 'user_friends']).then( function(result) { if (result.iscancelled) { console.log('login cancelled'); } else { console.log('login success 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 graph request. new graphrequestmanager().addrequest(inforequest).start() }//else },//function result function(error) { console.log('login fail error: ' + error); }//functionerror )//loginmanager }
Comments
Post a Comment