前言:react native虽然是当下比较好的跨平台开发解决方案,但是Hybrid APP比较比不上原生开发,有很多效果都无法实现。但是,react native有很多优秀的第三方库,足以满足我们的大部分开发。
来公司快一年了,都主要在维护两个native开发的app(当然,也有很多新需求)和参与一些其他app的模块开发,作为一个菜鸟前端来说,native的环境配置和第三方库的集成对我来说是比较麻烦的(特别是涉及到原生代码的修改),当然,有空的时候自己还是在琢磨,但比较有大佬在上面顶着,一直没有机会自己尝试。这几天比较闲而且马上有一个新项目要开始了,所以自己就准备新建一个项目并集成一下项目中需要的库。
废话太多,下面开始说我集成的一些库(主要是作为一个记录,以后有需要的时候不要到处去找资料):
我主要用的包管理工具是yarn(也可以用npm或者cnpm);这里只介绍第三方库的基本集成,属性和方法可以去参考文章和github查找学习。
个人意见:集成第三方库最好不要制定固定的版本,因为可能会和你的react native版本不相符,导致报错!!!
一、native-base:一个用于react native的ui库(ps:还是比较好用)
安装:yarn add native-base(npm install native-base --save) ==>> 将native-base加入到依赖列表
link:react-native link ==>> 自动配置native-base在环境中的一些修改
在页面中引入使用:
代码:
import React, {Component} from "react";
import {
Container,
Content,
Button,
Text,
} from "native-base";
export default class NativeBase extends Component{
constructor() {
super();
}
render(){
return(
<Container>
<Content>
<Button>
<Text>Click Me!</Text>
</Button>
</Content>
</Container>
)
}
}
效果:
官方文档:http://docs.nativebase.io/Components.html#Components
github:https://github.com/GeekyAnts/NativeBase
二、react-native-scrollable-tab-view:tab切换的第三方库,我们的项目中常用
安装:yarn add react-native-scrollable-tab-view(npm install react-native-scrollable-tab-view --save)
这个库比较简单,加入到依赖中就可以使用了
代码:
import React, {Component} from "react";
import {
View,
Image,
} from "react-native";
import {
Container,
Content,
Button,
Text,
} from "native-base";
import ScrollableTabView from "react-native-scrollable-tab-view";
export default class TabView extends Component{
constructor() {
super();
}
render(){
return(
<Container>
<ScrollableTabView tabBarPosition='bottom'>
<Content tabLabel='Tab1'>
<Text>111</Text>
</Content>
<Content tabLabel='Tab1'>
<Text>222</Text>
</Content>
<Content tabLabel='Tab1'>
<Text>333</Text>
</Content>
<Content tabLabel='Tab1'>
<Text>444</Text>
</Content>
</ScrollableTabView>
</Container>
)
}
}
效果:
参考博客:https://blog.csdn.net/xiangzhihong8/article/details/72730951?ref=myread
github:https://github.com/happypancake/react-native-scrollable-tab-view
三、react-native-swiper:轮播图
轮播图插件封装的比较好的有react-native-swiper和React-Native-Viewpager 两种,但react-native-swiper的文档比较完善,所以选择了它。当然,React-Native-Viewpager也是比较不错的哦。
安装:yarn add react-native-swiper(npm install react-native-swiper –save)
这个库也是安装后就可以直接使用了。
代码:
import React, {Component} from "react";
import {
View,
Image,
Dimensions,
StyleSheet,
} from "react-native";
import {
Container,
Content,
Button,
Text,
} from "native-base";
import Swiper from 'react-native-swiper';
export default class SwiperScreen extends Component{
constructor() {
super();
}
render(){
return(
<Container>
<Content>
<Swiper
autoplay={true} //是否自动播放
autoplayTimeout={4} //自动播放间隔时间(4s)
height={200}
horizontal={true}
paginationStyle={{bottom: 10}}
showsButtons={false}>
{/* 轮播的是一个组件,所以可以自定义一个view(包含图片或者不包含图片) */}
<Image source={require('./img/1.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
<Image source={require('./img/4.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
<Image source={require('./img/15.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
</Swiper>
</Content>
</Container>
)
}
}
效果:
参考博客:https://blog.csdn.net/u011272795/article/details/72669479
github:https://github.com/leecade/react-native-swiper
个人对react native的看法
react native是JS框架 React 在原生移动应用平台的衍生产物,有很多思想都是沿用与web端,但有些思想在手机端并不是很好,比如其中的 Image 组件,web端上的<img>标签是不会太过注意流量的损耗的(不多的情况下哈),但在手机上的Image 组件如果不做特殊处理的话,会每次进入页面的根据其 source 属性去请求一次,这样会造成流量的浪费。但这个问题在react native本身是并没有提供太好的解决方法的,只能用原生代码(比较简单)或者第三方库(我没有找到比较好的...)解决。
总的来说,如果是前端并且不会原生的话,我觉得写react native还是比较麻烦的,特别是在一些底层问题的解决上(还有就是一个思想的不同)。
这些都纯属个人看法,如有异议,欢迎交流。。。
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!