创建SignInScreen，从而导致HomeScreen

Question

嘿，我试着学习反应本地人。

我找到了一些很好的教程来创建我的应用程序。到目前为止，我成功地编写了一个具有firebase身份验证的表单。登录后，用户被定向到mainscreen.To，执行我使用StackNavigator的操作。现在，我希望主屏幕有一个BottomTabNavigator来在页面之间切换。它还应该有一个退出按钮来重定向回signInScreen。但是，在没有BottomTabNavigator和StackNavigator相互干扰的情况下，我如何做到这一点呢？因为这就像有两个不同的层次结构。

App.js

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="SignInScreen" component={SignInScreen} />
        <Stack.Screen name="Main" component={MainScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );
}

export default App;

SignInScreen.js

const SignInScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      if (user) {
        navigation.replace("Main");
      }
    })

    return unsubscribe
  }, [])


  const handleSignUp = () => {
    auth
      .createUserWithEmailAndPassword(email, password)
      .then(userCredentials => {
        const user = userCredentials.user; console.log(user.mail);
      })
      .catch(error => alert(error.message));
  }

  const handleLogin = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then(userCredentials => {
        const user = userCredentials.user;
        console.log(user.mail)
      })
      .catch(error => alert(error.message));
  }

  return (
    <KeyboardAvoidingView style={styles.container}>

      <View style={styles.inputContainer}>
        <TextInput placeholder="Email" value={email} onChangeText={text => setEmail(text)}  style={styles.input} />
        <TextInput placeholder="Password" value={password} onChangeText={text => setPassword(text)}  style={styles.input} secureTextEntry/>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={handleLogin} style={styles.button}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={handleSignUp} style={[styles.button, styles.buttonOutline]}>
          <Text style={styles.buttonOutlineText}>Register</Text>
        </TouchableOpacity>
      </View>

    </KeyboardAvoidingView>
  );
};

我已经处理这个问题好几个小时了。我希望有人能帮我

Answer 1

处理这类问题有一个标准的模式。被描述为在这里的文档中。简而言之，我们为这两个屏幕创建上下文并使用条件呈现，因此我们根本不需要使用导航。

下面是一个基于当前实现的示例。

const SignInContext = React.createContext();

const App = () => {

   const [isSignedIn, setIsSignedIn] = useState(false)
   const signInContextValue = useMemo(() => ({
       isSignedIn,
       setIsSignedIn
   }), [isSignedIn])


   return (
    <SignInContext.Provider value={signInContextValue}>
      <Stack.Navigator>
        {!isSignedIn ? (
          <Stack.Screen name="SignInScreen" component={SignInScreen} />
        ) : (
          <Stack.Screen name="Main" component={MainScreen} />
        )}
      </Stack.Navigator>
    </SignInContext.Provider>
  );
}

最初，SignInScreen将被呈现。下面是如何在屏幕中使用上下文。

const SignInScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  const { setIsSignedIn } = React.useContext(SignInContext);


  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      if (user) {
        setIsSignedIn(true)
      }
    })

    return unsubscribe
  }, [])

  ...

  return (...)
}

对于您的“注销”按钮，您也是这样做的。通过React.useContext(SignInContext)引用上下文并将其设置为false。