react native常见第三方库集成（一）

前言：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='Tab2'>
                        <Text>222</Text>
                    </Content>
                    <Content tabLabel='Tab3'>
                        <Text>333</Text>
                    </Content>
                    <Content tabLabel='Tab4'>
                        <Text>444</Text>
                    </Content>
                </ScrollableTabView>
            </Container>
        )
    }
}

效果：

 

自定义tabbar代码：

import React, {Component} from "react";
import {
    View,
    Text,
    // Button,
    Image,
    Platform,
} from 'react-native'

import {
    Container,
    Header,
    Title,
    Content,
    Button,
    Footer,
    FooterTab,
    Left,
    Right,
    Body,
    Icon,
    Form,
    Item,
    Input,
    Label,
    H1,
    ListItem,
    // Text,
    CheckBox
} from 'native-base';
import ScrollableTabView from "react-native-scrollable-tab-view";
import {config} from "../config";

export class HomeScreen extends Component{
    static navigationOptions = {
        header: null,   //去除页面中顶部的空白导航栏
    };
    constructor() {
        super();
        this.state = {
            curPage: 2,     //当前页为3，即首页
        }
    }

    render(){
        const {curPage} = this.state;
        return(
            <Container>
                <ScrollableTabView
                    renderTabBar={props => {
                        console.log(props);
                        const {goToPage, tabs, activeTab, ref} = props;
                        const icons = {
                            work: curPage === 0 ? require('../assets/img/work_sel.png') : require('../assets/img/work.png'),
                            contacts: curPage === 1 ? require('../assets/img/contact_sel.png') : require('../assets/img/contact.png'),
                            home: curPage === 2 ? require('../assets/img/home_sel.png') : require('../assets/img/home.png'),
                            message: curPage === 3 ? require('../assets/img/message_sel.png') : require('../assets/img/message.png'),
                            person: curPage === 4 ? require('../assets/img/person_sel.png') : require('../assets/img/person.png'),
                        };
                        const onChange = index => {
                            console.log('====index',index);
                            if (curPage === index) {
                                return;
                            }
                            Platform.select({
                                    ios: () => this.setState({curPage: index}),
                                    android: () => goToPage(index),
                                }
                            )();

                            // goToPage(index);
                        };
                        console.log('====this.state.curPage',this.state.curPage);
                        return (
                            <View key='tabbar' style={{flexDirection: 'row',backgroundColor: config.COLOR_HEADER_BACKGROUND}}>
                                <Button key='work' transparent style={{flex: 1, height: null, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}
                                        onPress={() => onChange(0)}>
                                    <Image source={icons.work} style={{resizeMode: 'contain', marginVertical: 5, height: 30,}} />
                                </Button>
                                <Button key='contacts' transparent style={{flex: 1, height: null, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}
                                        onPress={() => onChange(1)}>
                                    <Image source={icons.contacts} style={{resizeMode: 'contain', marginVertical: 5, height: 30,}} />
                                </Button>
                                <Button key='home' transparent style={{flex: 1, height: null, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}
                                        onPress={() => onChange(2)}>
                                    <Image source={icons.home} style={{resizeMode: 'contain', marginVertical: 5, height: 30,}} />
                                </Button>
                                <Button key='message' transparent style={{flex: 1, height: null, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}
                                        onPress={() => onChange(3)}>
                                    <Image source={icons.message} style={{resizeMode: 'contain', marginVertical: 5, height: 30,}} />
                                </Button>
                                <Button key='person' transparent style={{flex: 1, height: null, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}
                                        onPress={() => onChange(4)}>
                                    <Image source={icons.person} style={{resizeMode: 'contain', marginVertical: 5, height: 30,}} />
                                </Button>
                            </View>
                        );
                    }}
                    tabBarPosition='bottom'     //tabBar位于屏幕的位置
                    locked={false}              //是否允许滑动切换
                    initialPage={curPage}       //初始化时被选中的Tab下标，默认是0,最好不要有 负数
                    onChangeTab={({i}) => this.setState({curPage: i})}      //Tab切换之后会触发的方法，用于设置curPage=>切换icon
                    page={curPage}              //设置选中指定的Tab
                >
                    {/* 注意：在ScrollableTabView标签中写自子标签时，其样式不能用style属性，需要用contentContainerStyle */}
                    <Content key='work' tabLabel='work'
                             contentContainerStyle={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                        <Text>111</Text>
                    </Content>
                    <Content key='contacts' tabLabel='contacts'
                             contentContainerStyle={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}  >
                        <Text>222</Text>
                    </Content>
                    <Content key='home' tabLabel='home'
                             contentContainerStyle={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}  >
                        <Text>333</Text>
                    </Content>
                    <Content key='message' tabLabel='message'
                             contentContainerStyle={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}  >
                        <Text>444</Text>
                    </Content>
                    <Content key='person' tabLabel='person'
                             contentContainerStyle={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}  >
                        <Text>555</Text>
                    </Content>
                </ScrollableTabView>
            </Container>
        )
    }
}

注意：在ScrollableTabView标签中写其子标签时，其样式不能使用style属性，需要使用contentContainerStyle 

 

参考博客：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-swiper不能自动轮播的填坑：

问题描述：在项目中时间运用时，发现如果是引用的本地图片（写的假数据）可以正常使用，但换成服务器返回的图片数据（请求得到的）就不能自动轮播了，而且手动滑动也自能左右各多一张（即如果本身有4张图，手动滑动也只能出现6张，左右只 各自循环了一张）。

解决：给Swiper标签添加了一个key属性，其值为轮播的数量

代码：

 

个人对react native的看法

        react native是JS框架 React 在原生移动应用平台的衍生产物，有很多思想都是沿用与web端，但有些思想在手机端并不是很好，比如其中的 Image 组件，web端上的<img>标签是不会太过注意流量的损耗的（不多的情况下哈），但在手机上的Image 组件如果不做特殊处理的话，会每次进入页面的根据其 source 属性去请求一次，这样会造成流量的浪费。但这个问题在react native本身是并没有提供太好的解决方法的，只能用原生代码（比较简单）或者第三方库（我没有找到比较好的...）解决。

        总的来说，如果是前端并且不会原生的话，我觉得写react native还是比较麻烦的，特别是在一些底层问题的解决上（还有就是一个思想的不同）。

        这些都纯属个人看法，如有异议，欢迎交流。。。

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅