react Native 如何实现路由跳转，底部tab切换路由跳转，并隐藏页面路由系统头部显示

SukaLv

已于 2024-08-19 09:15:37 修改

阅读量580

点赞数 2

分类专栏： react Native记录文章标签： react native react.js javascript

于 2024-08-12 15:53:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43737733/article/details/141132390

版权

react Native记录专栏收录该内容

5 篇文章

订阅专栏

全部需要依赖
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

1. 安装相关所需要的库

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
npm install @react-navigation/stack

package.json 文件生成如下

2.在app入口文件设置引用

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

3.初始化

// 引入需要的组件
import {
  Text,
  View,
  Image,
} from 'react-native';

//初始化基础路由
const Stack = createStackNavigator(); //基础路由
const Tab = createBottomTabNavigator();  //tab页面路由

4.导入需要展示跳转的组件

import home from './pages/home /index'; // 确保路径正确 (tab首页
import tab2 './pages/tab2 /index'; // 确保路径正确（tab第2页面
import HelloWorld from './pages/hello/hello'; // 确保路径正确
import Hi from './pages/hello/hi'; // 确保路径正确
import MyComponent from './pages/apii'; // 确保路径正确

5. 设置项目基础路由设置

function App(): React.JSX.Element {
  return (
      <NavigationContainer>
        <Stack.Navigator mode="modal">
            <Stack.Screen name="home" options={{title:'消息',headerShown: false}} component={TabBar} />
            <Stack.Screen name="hello " options={{title:'用户列表'}} component={HelloWorld }/>
            <Stack.Screen name="hi" options={{title:'所有订单'}} component={Hi}/>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

//headerShown 隐藏默认头部name文字显示
//NavigationContainer 需要在根部，否则页面会有问题
//Stack.Screen 配置的是我需要路由跳转的页面

6.在第一个路由配置里设置编写TabBar页面

function TabBar(){
  return(
    <Tab.Navigator
      screenOptions={({route})=>({
        tabBarIcon:({focused,size,color})=>{
          let icon;
            //自定义tabbar 样式图片
          if(route.name==="消息"){
            icon = focused ?
             (
              <Image
                source={ require('./asstes/images/home1.png') }
                style={{ width: 25, height: 25, }} />
            ) : ( <Image
              source={ require('./asstes/images/home.png') }
              style={{ width: 25, height: 25, }} />)
          }
          return icon;
        }
      })}
    >
      <Tab.Screen name="消息" component={Message} options={{
        tabBarLabel: '消息',
        headerShown: false, // 这里设置为false隐藏标题
      }}/>
      <Tab.Screen name="我的" component={MyComponent} options={{
        tabBarLabel: '我的',
        // tabBarIcon: ({ color, size }) => (
        //   <Ionicons name="home" color={color} size={size} />
        // ),
        headerShown: false, // 这里设置为false隐藏标题
      }}/>
    </Tab.Navigator>
  )
}

tabbar页面

现在tabbar页面设置以及点击跳转就已经可以实现了

7.实现基础路由页面跳转

在需要跳转的组件内添加方法

例如：

const Home= ({navigation}) => {
    const renderItem = ({ item }) => <Item navigation={navigation} title={item.title}  sTitle={item.sTitle} dtime={item.dtime}/>;

    return (
      <View style={[styles.container,tw`bg-white`]}>
        <Button
          title="Go to Details"
          onPress={() => navigation.navigate('hello')}
            />
        </View>
        );
    };