反应屏幕之间的本机导航

Posted 2023-02-23

【中文标题】反应屏幕之间的本机导航

【英文标题】：react native navigation between screens

【发布时间】：2021-10-07 18:43:02

【问题描述】：

我正在尝试使用 reactnavigation.org 库，但对此我有一些问题。我有两种类型的导航屏幕。两个屏幕是注册和授权。其他是常规的应用程序屏幕。问题是我无法渲染父组件 App.js 或其他功能以从子组件重新加载应用程序，从而更改我的屏幕块。屏幕之间的导航运行、历史记录、配置文件、OtherRunners 工作正常。屏幕 Main 和 Enter 之间的导航工作正常。但是如果我需要从 Run 导航到 Main，或者从 Enter 导航到 Run，就会出现问题。

App.js

const App = () => 
    const Stack = createStackNavigator()
    const Drawer = createDrawerNavigator()
    const [loggedIn, setLoggedIn] = useState(false)
    async function getUserEmail()
        if(await AsyncStorage.getItem('@email'))
            setLoggedIn(true)
        else
            setLoggedIn(false)
        
    
    getUserEmail()
    function MenuDraw()
        return(
            <Drawer.Navigator
                drawerContentOptions=
                drawerType=
                drawerStyle=
            >
                <Drawer.Screen
                    name="Run"
                    component=Run
                    options=
                />
                <Drawer.Screen
                    name="History"
                    component=History
                    options=
                />
                <Drawer.Screen
                    name="Profile"
                    component=Profile
                    options=
                />
                <Drawer.Screen
                    name="OtherRunners"
                    component=OtherRunners
                    options=
                />
                <Drawer.Screen
                    name="LogOut"
                    component=Run
                    initialParams=action: 'logout'
                    options=
                />
            </Drawer.Navigator>
        )
    
    function MyDrawer()
        if(loggedIn)
            return(
                <Stack.Navigator
                    screenOptions=headerShown: false
                    initialRouteName="MenuDraw"
                >
                    <Stack.Screen name="MenuDraw" component=MenuDraw/>
                    <Stack.Screen name="Details" component=Details/>
                </Stack.Navigator>
            )
        else
            return (
                <Stack.Navigator
                    screenOptions=headerShown: false
                    initialRouteName="Main"
                >
                    <Stack.Screen name="MenuDraw" component=MenuDraw />
                    <Stack.Screen name="Details" component=Details />

                    <Stack.Screen name="Main" component=Main />
                    <Stack.Screen name="Enter" component=Enter />
                </Stack.Navigator>
            )
        
    
  return(
      <NavigationContainer>
          <MyDrawer/>
      </NavigationContainer>
  )

export default App;

我尝试使用重新加载应用工具，但这些对我没有帮助。他们没有工作。在下面的这部分代码中。在运行屏幕上。

Run.js

const Run = (navigation,route) => 
    const clearStorage = async () => 
        await AsyncStorage.clear()
    
    if(route.params)
        if(route.params.action === 'logout')
            clearStorage()
            navigation.navigate("Main", )
        
    

export default Run;

我正在尝试通过清理存储退出并导航到主屏幕。但它不适用于发布模式。这个我试过了，如下。

App.js

function MyDrawer()
        if(loggedIn)
            return(
                <Stack.Navigator
                    screenOptions=headerShown: false
                    initialRouteName="MenuDraw"
                >
                    <Stack.Screen name="MenuDraw" component=MenuDraw/>
                    <Stack.Screen name="Details" component=Details/>

++++                <Stack.Screen name="Main" component=Main />
++++                <Stack.Screen name="Enter" component=Enter />
                </Stack.Navigator>
            )
        else
            return (
                <Stack.Navigator
                    screenOptions=headerShown: false
                    initialRouteName="Main"
                >
                    <Stack.Screen name="MenuDraw" component=MenuDraw />
                    <Stack.Screen name="Details" component=Details />

                    <Stack.Screen name="Main" component=Main />
                    <Stack.Screen name="Enter" component=Enter />
                </Stack.Navigator>
            )
        
    

无论哪种方式都无法正常工作。我该如何解决？我可以从子屏幕渲染 App.js 组件吗？或者我应该创建两个屏幕块线

<Stack.Screen name="MenuDraw" component=MenuDraw/>
<Stack.Screen name="MenuRegister" component=MenuRegister/>

并把我所有的屏幕按物品放在匹配部分？

我需要退出此部分： App.js

some code

               <Drawer.Screen
                    name="LogOut"
                    component=Run
                    initialParams=action: 'logout'
                    options=
                />
            </Drawer.Navigator>

some code

【问题讨论】：

这对您有帮助吗？ reactnavigation.org/docs/auth-flow

不，不是。当您需要在一个文件中渲染组件时，这很容易。但我有 screen.js 文件导出到 index.js 文件，该文件导出到 App.js 文件。最后我有const [login, setLogin] = useState()。如果我可以创建一些主要的const 反应变量。它不会渲染我的 App.js。我认同。我应该以某种方式呈现 App.js - 该操作的子组件的父组件。

【参考方案1】：

您是否尝试过使用 useEffect 钩子来上路？ :-)

  useEffect(() => 
    const getUserEmail = async () => 
        if(await AsyncStorage.getItem('@email'))
            setLoggedIn(true)
        else
            setLoggedIn(false)
        
    ;
    getUserEmail();
  , []);

【讨论】：

我已经尝试过useEffect，但是在需要时渲染组件是有意义的，这取决于更改的变量或状态。如果我可以从按钮重新加载反应本机应用程序（博览会），那么我可以使用它。但我不能那样做。我没有这些功能，或者我不知道。

好吧，所以我不能 100% 确定我是否正确，如果我错了，请纠正。您想根据状态返回 navigator。我认为诀窍是只渲染屏幕而不是整个导航器。也许这有帮助：github.com/bithoven-dev/…

我有最简单的方法来解释我的问题！假设您需要从 Run.js 子文件（组件）更改 App.js 文件（组件）中的 const [logon, setLogin] = useState() 并在更改后渲染 App.js。您的子文件 Run.js 导出到 index.js 文件，然后导出到 App.js 文件。一种情况：您不能使用 JSX 元素，例如 - View、Text 等。你会怎么做？正如我之前所说：如果它是一个文件，那么就没有问题。

所以如果你的 App.js 持有渲染逻辑，我仍然会使用 useEffect 来触发状态变化的重新渲染。当子组件中的状态发生变化时，我将使用一个框架进行状态管理，如 redux/zustand 或响应 buildin useContext/Provider 模式将信息获取到 App.js

是的，你是对的！ ) 但我认为有最简单的方法可以做到这一点。无需使用额外的框架。毕竟过程本身很简单。