react-native:无法在Facebook内部调用导航器LoginManager函数
问题描述:
我是新来对本机做出反应,我试图通过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>
);
}
}
再次,我会很感激任何意见/帮助。
答
好吧我真的设法解决了我自己的问题。
所以,我有我的按压动作结合本如
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
}