Question

在我的应用程序中，我在 @react-navigation/bottom-tabs 中设置了一个 App.js，然后每个 Tab.Screen 都是一个 @react-navigation/stack，其中与所选标签相关的所有屏幕都在堆叠。

现在我有一个登录屏幕 Login.js，我想在多个位置展示它。例如，我让用户浏览应用程序，但是当他们点击某些按钮时，如果用户当然没有登录，我想将 Login.js 显示为全屏模式。

不确定要分享什么代码，但这里有一些片段：

对于我的 App.js，我已经：

...
function App(props) {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="QnA" component={QnA} />
        <Tab.Screen name="Tutorials" component={Tutorials} />
        <Tab.Screen name="Student Center" component={StudentCenter} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
...

像 Tutorials.js 这样的屏幕是：

...
function Tutorials(props) {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Tutorials Home" component={TutorialsHome} />
            <Stack.Screen name="Course Detials" component={CourseDetails} />
            <Stack.Screen name="My Courses" component={MyCourses} />
            <Stack.Screen name="Learning" component={Learning} />
        </Stack.Navigator>
    );
}
...

如您所见，每个屏幕都堆叠在各自的堆栈中。现在，例如，Learning 屏幕中有一个按钮，按下该按钮时会检查用户是否已登录，如果用户未登录，则应将 Login.js 显示为全屏模式.

因为登录屏幕可以随时从任何屏幕弹出，所以我不知道把它放在哪里。我知道如何在 iOS (Swift) 中执行此操作，我们只需将 .present 用于此类功能。

Answer 1

说到 React Native 中的导航，即使模态也是堆栈的一部分。

所以这里的技术是在顶部有一个带有选项卡和登录模式的堆栈导航器，并在屏幕上显示您的选项卡。

代码如下所示。

const RootStack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator mode="modal" headerMode="none">
        <RootStack.Screen name="Main" component={MyTabs} />
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

当你打开一个标签时，你可以在 onpress 内设置一个条件，如下所示

    function MyTabs({ navigation }) {
      return (
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={Tab1}
            options={{ tabBarButton: (props) => <TouchableOpacity {...props} onPress={()=>{
// You can have your condition to match your logic
              if(true){
                navigation.navigate('MyModal');
              }
              else{
                props.onPress();
              }
            }}/> }}
          />
          <Tab.Screen
            name="Settings"
            component={Tab2}
            options={{ tabBarButton: (props) => <TouchableOpacity {...props} /> }}
          />
        </Tab.Navigator>
      );
    }

注意您必须正确维护登录并在用户未登录时隐藏整个 mytabs 屏幕。

你可以试试 https://snack.expo.io/@guruparan/tabs-and-modal

在 Navigation 内的屏幕上按下按钮时显示全屏模式

1 个答案: