反应导航抽屉 OnPress 未正确触发
React Navigation Drawer OnPress Not Firing Correctly
我正在使用 React Native 和 React 导航。我正在创建一个反应导航抽屉,然后使用我自己的格式在抽屉内部。我正在努力让注销按钮正常工作。
这很好用:
<TouchableOpacity onPress={this.props.logoutUser()}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
但我想包含一个警报并确保用户想要退出。这是行不通的。它注销用户/下次我登录应用程序时我可以看到他们已注销,但它不会触发我的应用程序的刷新,直到我手动刷新它。
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
this.props.logoutUser
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
作为参考,这里是我渲染登录屏幕与主页面 (props.restoring) 的方式根据用户是否登录而变化。出于某种原因,它只在顶部调用时更新,我想知道抽屉或警报是否会影响我调用函数的方式:
const ChatAppComponent = props => {
if (props.restoring) {
return <ActivityIndicator style={styles.activityIndicator} />
} else {
if (props.logged) {
return <DashboardNavigator />
} else {
return <AuthScreen />
}
}
}
编辑:添加注销功能
export const logoutUser = () => {
return dispatch => {
dispatch(sessionLoading());
LoginManager.logOut();
firebaseService
.auth()
.signOut()
.then(async () => {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
dispatch(sessionLogout());
})
.catch(error => {
dispatch(sessionError(error.message));
});
};
};
您需要使用 redux 调用此函数。
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
this.props.dispatch(this.props.logoutUser()); //here
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
因为注销功能是一个 redux 操作。
答案与异步等待有关。不知道为什么它以前不能与 async await 一起使用,但我不得不将调度操作移到 Google 方法之上。
firebaseService
.auth()
.signOut()
.then(async () => {
dispatch(sessionLogout());
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
})
我正在使用 React Native 和 React 导航。我正在创建一个反应导航抽屉,然后使用我自己的格式在抽屉内部。我正在努力让注销按钮正常工作。
这很好用:
<TouchableOpacity onPress={this.props.logoutUser()}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
但我想包含一个警报并确保用户想要退出。这是行不通的。它注销用户/下次我登录应用程序时我可以看到他们已注销,但它不会触发我的应用程序的刷新,直到我手动刷新它。
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
this.props.logoutUser
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
作为参考,这里是我渲染登录屏幕与主页面 (props.restoring) 的方式根据用户是否登录而变化。出于某种原因,它只在顶部调用时更新,我想知道抽屉或警报是否会影响我调用函数的方式:
const ChatAppComponent = props => {
if (props.restoring) {
return <ActivityIndicator style={styles.activityIndicator} />
} else {
if (props.logged) {
return <DashboardNavigator />
} else {
return <AuthScreen />
}
}
}
编辑:添加注销功能
export const logoutUser = () => {
return dispatch => {
dispatch(sessionLoading());
LoginManager.logOut();
firebaseService
.auth()
.signOut()
.then(async () => {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
dispatch(sessionLogout());
})
.catch(error => {
dispatch(sessionError(error.message));
});
};
};
您需要使用 redux 调用此函数。
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
this.props.dispatch(this.props.logoutUser()); //here
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
</TouchableOpacity>
因为注销功能是一个 redux 操作。
答案与异步等待有关。不知道为什么它以前不能与 async await 一起使用,但我不得不将调度操作移到 Google 方法之上。
firebaseService
.auth()
.signOut()
.then(async () => {
dispatch(sessionLogout());
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
})