react-native rn 界面跳转 实现底部导航栏

首先安装和配置好开发环境（这里主要介绍页面跳转，环境搭建可见官网React Native 中文网 搭建开发环境）

 下载依赖

npm install react-native-gesture-handler

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

npm install --save react-navigation react-navigation-stack react-navigation-tabs

如果安装上面依赖后，运行下面代码报错，可以根据报错内容去具体分析一下是不是哪个依赖没有安装。也可以参考一下在文章末尾我的 package.json 文件，直接把dependencies中你没有的依赖加进去在重新 npm install 一下

App.js

import React from 'react';
import 'react-native-gesture-handler';  
import { NavigationContainer } from '@react-navigation/native';
import Navigation from "./commont/utils/navigation"; //导航管理组件

const App = () => { 
  return (
    <NavigationContainer>     
      <Navigation />
    </NavigationContainer> 
  )
}
export default App;

 Navigation.js

import React from 'react';

//导航
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
//底部导航
import ButtomNavigation from './buttomNavigation';

//页面
import Login from '../../pages/login';
import Register from '../../pages/login/components/register';
import Feedbackadd from '../../pages/home/components/feedback/components/feedbackadd';
import Feedbackmain from '../../pages/home/components/feedback/components/feedbackmain';
import Remindlook from '../../pages/home/components/feedback/components/remindlook';
const Navigation = createStackNavigator(
    {
        //底部导航
        buttomNavigation: {
            screen: ButtomNavigation,
            navigationOptions: {
                headerShown: false,
            }
        },
        //登录页面
        login: {
            screen: Login,
        },
        //跟登录界面同级的界面，比如 注册页面 或者是没有底部导航的 详情页等
        register: {
            screen: Register,
        },
        feedbackadd: {
            screen: Feedbackadd,
        },
        feedbackmain: {
            screen: Feedbackmain,
        },
        remindlook: {
            screen: Remindlook,
        }
    },
    {
        initialRouteName: "login", //配置项目初始打开的页面
        mode: 'modal',
        headerMode: 'none', 
    }
)

export default createAppContainer(Navigation);//通过 createAppContainer 创建

 ButtomNavigation.js

import React from 'react';
import { Text } from 'react-native'; 
import { createBottomTabNavigator } from 'react-navigation-tabs';
import ShortTerm from '../../pages/home/components/shortTerm';
import LongTerm from '../../pages/home/components/longTerm'; 
import Personage from '../../pages/home/components/personage';
import { pxToDp, pxToDpHeight } from './pxToDp';

const BottomNavigator = createBottomTabNavigator({
    ShortTerm: {
        screen: ShortTerm,//对应的页面组件，导航默认显示第一个
        navigationOptions: {
            title: '短期',
            tabBarLabel: '短期', 
            tabBarIcon: ({focused, tintColor}) =>  <Text style={{ fontFamily: 'iconfont', fontSize: 30,color:tintColor }}>{'\ue66e'}</Text>,//图标
        }
    },
    LongTerm: {
        screen: LongTerm,
        navigationOptions: {
            title: '中长期',
            tabBarLabel: '中长期', 
            tabBarIcon: ({focused, tintColor}) =>  <Text style={{ fontFamily: 'iconfont', fontSize: 30,color:tintColor }}>{'\ue67a'}</Text>,
        }
    }, 
    Personage: {
        screen: Personage,
        navigationOptions: {
            title: '个人',
            tabBarLabel: '个人',   
            tabBarIcon: ({focused, tintColor}) =>  <Text style={{ fontFamily: 'iconfont', fontSize: 30,color:tintColor }}>{'\ue669'}</Text>,
        }
    }
}, {
    tabBarOptions: {
        showIcon: true,            // 是否显示选项卡的图标 
        activeTintColor: '#081753', // 选中时状态颜色
        inactiveTintColor: '#919191', // 未选中状态颜色
        // activeBackgroundColor:'#2e2e2e',//选中的背景色
        labelStyle: {              // 选项卡标签的样式对象
            fontSize: pxToDp(12),
        },
        style: {                   // 选项卡栏的样式对象
            height:pxToDpHeight(50),            
            // borderTopWidth:1,
            borderTopColor:'#F0F2EF',
            elevation: 10,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）  
        },
    }
})
export default BottomNavigator;

Login.js

import React  from 'react';

import {View, Text} from 'react-native';

function Login(props) {
    const {navigation} = props; 
    
    function handleClick(){
       navigation.replace('buttomNavigation');
    }    

    return <Text onPress={handleClick}>登录</Text>

}

export default Login; 

 package.json   dependencies片段

  "dependencies": {
    "@ant-design/react-native": "^4.0.5",
    "@react-native-community/async-storage": "^1.12.1", 
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.10", 
    "@react-native-community/viewpager": "^4.2.1", 
    "axios": "^0.20.0",
    "react": "16.13.1",
    "react-native": "0.63.2", 
    "react-native-camera": "^3.40.0",
    "react-native-crypto-js": "^1.0.0",  
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.15.0",
    "react-native-tiny-toast": "^1.0.7",
    "react-native-webview": "^10.10.2",

    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.12.8", 

    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2",
    "react-navigation-tabs": "^2.10.1", 
    "react-native-gesture-handler": "^1.9.0"
  },

 （这是我正在做的项目配置，依赖是20年末下载的，现在正常使用，如果还是不能正常运行那只好根据提示缺啥补啥了）（现在才想起来计一下，免得下次自己需要又不会弄了）

完

 

原文地址：https://blog.csdn.net/ssoutlook/article/details/120368711