想要在 React Native 的一个选项卡中的屏幕之间导航

Question

我正在开发一个项目，我想在一个选项卡中的屏幕之间切换。例如我有 4 个底部标签。从第一个选项卡，我想移动到第一个选项卡内的另一个屏幕或组件

从这张图片中，我想通过留在第一个选项卡内移动到另一个屏幕或组件。谁能帮助我找到可能的方法。

Answer 1

您需要嵌套导航器，这是react-native-navigation的基本功能。

此处的文档对此进行了描述。

导航到屏幕的工作方式与往常一样，如此处文档中所述。

这是一个最小的工作示例，我为其制作了一份工作小吃。

应用程序.js

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';

import Tabs from './Tabs'

export default function App() {

   return (
      <NavigationContainer>
         <Tabs />
      </NavigationContainer>
   )
}

带有 2 个选项卡的Tabs.js

import React from 'react';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Home from './Home.js'
import Profile from './Profile.js'

const Tab = createBottomTabNavigator();

function Tabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

export default Tabs;

Home.js aStackNavigator

import React from 'react';

import {createNativeStackNavigator} from '@react-navigation/native-stack';

import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'

const Stack = createNativeStackNavigator()

function Home() {
    return <Stack.Navigator>
       <Stack.Screen name="" component={ScreenA} options={{headerShown: false}} />
       <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
}

export default Home;

ScreenA.js

import React from 'react'
import { View, Button } from 'react-native'

function ScreenA(props) {

  return <View>
      <Button title="NavigateToScreenBInTabHone" onPress={() => props.navigation.navigate('ScreenB')}>
      </Button>
  </View>
}

export default ScreenA;

ScreenB.js

import React from 'react'
import { View } from 'react-native'

function ScreenB() {

  return <View></View>
}

export default ScreenB;

Profile.js

import React from 'react'
import { View } from 'react-native'

function Profile() {

  return <View></View>
}

export default Profile;