在 React Native 中使用 AWS Amplify 登录后如何呈现自定义组件？

Question

I want render my app after sigin in using Amplify react ui components. Here is what my code looks like.

    <View style={styles.container}>
        <Logo />
        <Authenticator usernameAttributes="email">
            <Home />
        </Authenticator>
    </View>

Here is the Home component.

const Home = (props) => {
if (props.authState === 'signedIn') {
    return <Text>Home</Text>;
} else {
    return <></>;
}};

Here is how it looks after signin.

Answer 1

You need to pass something to the Home component.

Something like this:

<View style={styles.container}>
    <Logo />
    <Authenticator usernameAttributes="email">
        <Home authState={authState}/>
    </Authenticator>
</View>

Where authState receives a variable that specifies whether the user is signed in or not as a string for you to be able to compare it using props.authState === 'signedIn'