标签：.. react components 跳转 import rn navigation native
首先安装和配置好开发环境（这里主要介绍页面跳转，环境搭建可见官网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年末下载的，现在正常使用，如果还是不能正常运行那只好根据提示缺啥补啥了）（现在才想起来计一下，免得下次自己需要又不会弄了）
完
标签：..,react,components,跳转,import,rn,navigation,native 来源： https://blog.csdn.net/ssoutlook/article/details/120368711
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。