Javascript 导航到不使用编程路由的其他屏幕

我有一个

Routes

组件，它返回基于

user

状态的

Stack.Screen

路由，或者一个加载屏幕，取决于来自上下文的

加载

状态

出于某种原因，当调用

navigation.nagivate

来更改屏幕时，它只会重定向回

initialRouteName

是什么

我怀疑这是因为装载机没有返回任何路线，而且

导航.navigate

调用在某处丢失，但我不确定

MVCE

Routes.js

function Routes() {
  const { loading } = useContext(AppContext);
  const { user } = useContext(AuthContext);

  if (loading) {
    return <Text>Loading</Text>;
  }

  return (
    <NavigationContainer>
      {user ? (
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Order" component={OrderScreen} />
        </Stack.Navigator>
      ) : (
        <Stack.Navigator initialRouteName="Login">
          <Stack.Screen name="Login" component={LoginScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}

---

导航的问题不在于上下文中的“加载”状态

因此，当您打开订单屏幕时，在AppContext中将加载设置为true，这将导致routes中的NavigationContainer重新呈现，从而重置导航状态

const OrderContext = createContext({});
function OrderProvider({ children }) {
  const [order, setOrder] = useState(null);
  const [orderLoading, setOrderLoading] = useState(false);
  const { setLoading } = useContext(AppContext);
  return (
    <OrderContext.Provider
      value={{
        order,
        setOrder,
        orderLoading,
        getOrder: (orderId) => {
          setOrderLoading(true);
          setTimeout(() => {
            setOrder(orderId);
            setOrderLoading(false);
          }, 1000);
        }
      }}
    >
      {children}
    </OrderContext.Provider>
  );
}

const OrderContext=createContext（{}）；
函数OrderProvider（{children}）{
const[order，setOrder]=useState（null）；
const[orderLoading，setOrderLoading]=useState（false）；
const{setLoading}=useContext（AppContext）；
返回(
{
setOrderLoading（true）；
设置超时（（）=>{
setOrder（orderId）；
setOrderLoading（false）；
}, 1000);
}
}}
>
{儿童}
);
}

您必须在订单上下文中加载，这将解决此问题。重新渲染整个导航容器不是一个好主意

零食有一个工作示例，其中仅为订单屏幕加载

---

太棒了，谢谢。没有办法保持全局加载状态，而不是为每个屏幕提供相同的加载机制吗？可能有一个模式并在顶部显示，因为重新渲染NavigationContainer时，它将丢失该状态，不过，这就像每次都重新渲染整个应用程序来加载项目，这不是我想要的recommend@BenFortune这将用于高阶类，其中高阶类在需要时呈现加载程序，否则呈现子类。

const OrderContext = createContext({});
function OrderProvider({ children }) {
  const [order, setOrder] = useState(null);
  const { setLoading } = useContext(AppContext);
  return (
    <OrderContext.Provider
      value={{
        order,
        setOrder,
        getOrder: (orderId) => {
          setLoading(true);
          setTimeout(() => {
            setOrder(orderId);
            setLoading(false);
          }, 1000);
        }
      }}
    >
      {children}
    </OrderContext.Provider>
  );
}

const OrderContext = createContext({});
function OrderProvider({ children }) {
  const [order, setOrder] = useState(null);
  const [orderLoading, setOrderLoading] = useState(false);
  const { setLoading } = useContext(AppContext);
  return (
    <OrderContext.Provider
      value={{
        order,
        setOrder,
        orderLoading,
        getOrder: (orderId) => {
          setOrderLoading(true);
          setTimeout(() => {
            setOrder(orderId);
            setOrderLoading(false);
          }, 1000);
        }
      }}
    >
      {children}
    </OrderContext.Provider>
  );
}