当身份验证状态发生更改时,我尝试呈现应用程序的主入口点,但是当我尝试转到应用程序的主入口点时,出现黑屏。我假设如果未在render函数本身中调用主页,则无法进入主页?如果是这样,建立登录后如何呈现应用程序的主页?
index.js
class App extends Component {
/*
constructor(props) {
super(props);
this.state = {
authState: null,
authData: null
}
}
*/
handleAuthStateChange(state) {
alert(state)
if (state === 'signedIn') {
alert('here');
return ( // go To Entry point of app
<ApolloProvider store={store} client={client}>
<AppWithNavigationState/>
</ApolloProvider>
);
}
}
render() {
//const { authState, authData } = this.state;
// const signedIn = (authState === 'signedIn');
return (
<Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}>
<Login/>
</Authenticator>
);
}
}
export default App = codePush(App);
Login.js
export default class Login extends Component {
render() {
const { authState, onStateChange } = this.props;
if (!['signIn', 'signedOut', 'signedUp'].includes(authState)) {
alert('login')
return null;
}
return (<View style={styles.container}>
<View style={styles.backgroundContainer}>
<Image source={images.icons.LoginImage} style={styles.backgroundImage} />
</View>
<View style={styles.overlay}>
<Button iconLeft light rounded style={styles.facebookLoginButton}>
<Icon style={styles.facebookIcon} name='logo-facebook' />
<Text style={styles.facebookButtonText}>Login with Facebook</Text>
</Button>
<Button rounded bordered light style={styles.loginLaterButton}
onPress={() => onStateChange('signedIn')}>
<Text style={styles.buttonText}>Sign In Test</Text>
</Button>
</View>
</View>
);
}
}
最佳答案
这实际上与渲染和状态有关(与AWS Amplify无关)。首先,在构造函数中设置状态:constructor(props) { super(props); this.state = { authState: '' };}
然后,您的onAuthStateChange()
变为:onAuthStateChange(newState) { if (newState === 'signedIn') { this.setState({ authState: newState }); }}
最后,在您的render()
方法中,您可以调整渲染,以使其根据您的身份验证状态执行“正确的操作”。render() { if (this.state.authState === 'signedIn') { return (<ApolloProvider ...><MyApp/></ApolloProvider>); } else { return (<Authenticator .../>); }}
您也可以使用HOC将其抽象化(与AWS Amplify的withAuthenticator()
HOC相同)。基本上,身份验证器最初会显示。收到signedIn状态后,内部组件状态将更新,这将导致该组件与应用程序的其余部分一起重新呈现。