如何使 React Native 应用程序始终从特定屏幕启动

Question

我正在学习 React Native，并且正在研究如何使应用程序在应用程序启动或导航返回时始终从特定的

HomeScreen

开始。我有一个

HomeScreen

，它使用自定义挂钩从 api 调用填充

FlatList

。并且希望在应用程序启动时始终调用 api 调用。如果响应代码=-1，则始终导航到另一个名为

License

的屏幕。当

LicenseScreen

弹出并且用户使用箭头后退按钮导航回

HomeScreen

时，应用程序将重定向初始 api 调用。简而言之，只要响应代码为 -1，用户就不应该看到平面列表。这是我的代码片段。

const AllClient = () => {
  const navigation = useNavigation();
  const { state } = useAuth();
  let [reload, setReload] = useState(true);

  const [loading, data] = useFetchHook(
    //this is a custom hook that uses axios private to fetch data from api
    `/api/customer/all_is_customers/${state?.user?.id}`,
    reload
  );

  useEffect(() => {
    setReload(!reload);
    if (data?.code == -1) {
      navigation.navigate("license"); //I want to navigate to License Screen every time user launch the application
    } else {
      setCustomers(data?.obj);
    }
  }, [loading, data]);

  const [customers, setCustomers] = useState(data?.obj); //to be used in my flatlist
  return (
    <View>
      <FlatList
        keyExtractor={(item) => item.id.toString()}
        className="flex-1 mb-3"
        data={customers}
        renderItem={({ item }) =>
          customers.includes(item) ? <CustomerRow customer={item} /> : null
        }
      />
    </View>
  );
};

Answer 1

使用条件渲染屏幕而不是导航。在异步解析路由时显示加载状态，并在解析后设置所需的路由。像这样的东西：

const [route, setRoute] = useState(undefined);

useEffect(() => {
...
  // TODO API call
  setRoute("Home") // Set state according to result 
...
}, [])

return !route ? (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <ActivityIndicator />
  </View>
) : (
  <NavigationContainer>
    <Stack.Navigator>
      {route == 'Home' ? (
        <Stack.Screen name="Home" component={HomeScreen} />
      ) : (
        <Stack.Screen name="License" component={LicenseScreen} />
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

有关条件渲染的更多信息，请参阅身份验证流程。