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

Question

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

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

Answer 1

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

这在文档 here 中有描述。

如文档 here.

中所述，导航至屏幕正常工作

这是一个最小的工作示例，我为此制作了一个工作 snack。

App.js

import React from 'react';

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

import Tabs from './Tabs'

export default function App() {

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

Tabs.js 有 2 个标签

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一个StackNavigator

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;

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

Want to navigate between screens in one tab in react native

react-native

react-navigation