时间戳

首页 > 解决方案 > 仅显示一次欢迎屏幕

react-native - 仅显示一次欢迎屏幕

问题描述

我有一个 React Native 应用程序，我想在首次安装应用程序时显示一个欢迎屏幕。

我有一个欢迎屏幕，当用户单击继续按钮时，我的异步存储值会发生变化，因此我知道是否应该显示该屏幕。

在 app.js 中，我检查该值以确定是否应该显示 Home 或 Welcome。

这就是我在 app.tsx 中的内容：

      const [shouldDisplayWelcome, setShouldDisplayWelcome] = useState<boolean>(true);
      useEffect(() => {
        StorageManager.getInstance().getData(Key.firstTime).then((firstTime) => {
          if (firstTime != undefined) {
            setShouldDisplayWelcome(firstTime);
          }
        })    
      }, []);
    
      return (
        <ThemeProvider>
          <Provider store={store}>
            {
                <NavigationContainer>
                  <Stack.Navigator>
                    {
                      shouldDisplayWelcome && <Stack.Screen
                        name="Welcome"
                        component={Welcome}
                        options={{ headerShown: false }}
                      />
                    }
                    <Stack.Screen
                      name="Home"
                      component={Home}
                      options={{ headerShown: false }}
                    />
                    <Stack.Screen
                      name="Settings"
                      component={Settings}
                      options={{ headerShown: false }}
                    />
                  </Stack.Navigator>
                </NavigationContainer>
            }
          </Provider>
        </ThemeProvider>

它正在工作，但是当用户关闭应用程序然后返回它时，会出现一个闪烁，显示欢迎屏幕并直接进入主屏幕。我猜那是因为获取数据是异步操作，但我不知道如何解决这个问题，所以如果不需要显示欢迎屏幕，在得到答案之前它不会显示半秒钟StorageManager.

编辑：我试图“保留”应用程序，直到异步函数完成，如下所示：

 const chooseScreen = async () => {
    await StorageManager.getInstance().getData(Key.firstTime).then((result) => {
      if (result != undefined) {
        setShouldDisplayWelcome(result);
      }
    })
  }

  useEffect(() => {
    chooseScreen();
  }, [])

但这也没有用。

标签： react-native

解决方案

我有一个解决方法来解决这个问题，不确定这是否是最好的解决方案，但它确实有效。我所做的是创建另一个名为的状态loading并将其设置为 true。然后，在异步函数完成后，我在块中设置loading为 false 。finally我设置为仅在为 false 时App.tsx渲染我的，这仅在异步操作完成后发生。开始时欢迎屏幕闪烁的问题不再发生。NavigationContainerloading

const App = () => {
  const [shouldDisplayWelcome, setShouldDisplayWelcome] = useState<boolean>(true);
  const [loading, setLoading] = useState<boolean>(true);

  const chooseScreen = async () => {
    await StorageManager.getInstance().getData(Key.firstTime).then((result) => {
      if (result != undefined) setShouldDisplayWelcome(result);
    }).finally(() => {
      setLoading(false);
    })
  }

  useEffect(() => {
    chooseScreen();
  }, [])

  return (
    <ThemeProvider>
      <Provider store={store}>
        {
          !loading &&
          <NavigationContainer>
            ....
          </NavigationContainer>
        }
      </Provider>
    </ThemeProvider>

推荐阅读