React Native使用TabNavigator时出现的问题

RN开发过程中会涉及到iOS和安卓两个端的适配,尤其是TabBar和Navigatior的使用方面很容易出错。

最开始的学习中都是使用TabBarIOS和NavigatorIOS来实现框架的搭建,但是这两个组件只能适用在iOS端,安卓端是无法使用的,所以就得使用TabNavigator和Navigator来实现两个端的适配开发。

1、安装TabNavigator,如果直接进入到项目的根目录然后就进行安装的话,会报错!


错误提示

正确步骤:从控制台进入到项目根目录以后

react-native link ||rnpm link一下然后再

npm i react-native-tab-navigator --save

2、使用Navigator


直接像上图这样引入Navigator,运行时会报错:

Navigator is deprecated and has been removed from this package. It can now be installed ' +  'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +  'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'

此时我们需要通过引用:

react-native-deprecated-custom-components 来导入 Navigator 组件

正确步骤:

1、打开程序的根目录(也就是和 Package.json 同级的目录)

2、使用cmd 命令工具

输入命令:    npm  installreact-native-deprecated-custom-components  --save 

在使用Navigator的地方引用便可使用。

引用方式:import {Navigator} from "react-native-deprecated-custom-components"

注意:在引用时 一定在导入 Navigator的时候加上 {}  要不然会报错。


正确写法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容