如何在 React Native 中显示一次屏幕？

Question

当用户第一次打开应用程序时（如欢迎屏幕），我如何才能只向用户显示一次 firstScreen？我希望用户在下一个开口中看到 secondScreen。

App.js 画面：

import React from "react";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import firstScreen from "./src/screens/firstScreen.js";
import secondScreen from "./src/screens/secondScreen,js";

const Stack = createStackNavigator();

function App() {
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
           <Stack.Screen
             name="First"
             component={firstScreen}
             options={{
               headerShown: false,
             }}
           />
          <Stack.Screen
            name="Second"
            component={secondScreen}
            options={{
              headerShown: false,
            }}
          />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 1

您可以在本地存储中存储一个值。也许检查 useEffect 并为该检查设置状态。然后你可以有条件地渲染。希望能给你一个主意。

Answer 2

function App() {

  const [showOneTimeScreen, setShowOneTimeScreen] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    /* 
    Check from localstorage or from somewhere should you
    show "OneTimeScreen"
    and setShowOneTimeScreen to needed value , and setLoading to true
    */
  }, []);


  if (loading) {
    return <LoadingScreen />
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {showOneTimeScreen && (
          <Stack.Screen name="OneTimeScreen" component={OneTimeScreen} />
        )}
        <Stack.Screen
          name="Second"
          component={secondScreen}
          options={{
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}




function OneTimeScreen() {

  useEffect(() => {
    /* 
    Set to localstorage or somewhere you want
    that  "OneTimeScreen" has been shown
    */
  }, []);


  ....
}

如何在 React Native 中显示一次屏幕？

How to show a screen once in React Native?

reactjs

react-native

react-native-navigation