react-native Android应用开发中用的几个第三方组件

1，react-native-vector-icons（图标集）

GitHub地址：https://github.com/oblador/react-native-vector-icons

用法：

yarn add react-native-vector-icons
或者
npm install --save react-native-vector-icons // 下载库
react-native link react-native-vector-icons // 自动关联

如执行react-native link react-native-vector-icons自动关联报错的用户可以自行在GitHub上了解手动配置的过程

自动关联如若没有出错，则需要重新执行react-native run-android安装apk,否则字体库不生效

2，react-native-tab-navigator（底部导航栏）

一个在场景之间切换的标签栏，底部导航栏
GitHub地址：https://github.com/ptomasroos/react-native-tab-navigator

安装：

npm install react-native-tab-navigator --save
或者
yarn add react-native-tab-navigato

用法：
先导入所需要的包

import TabNavigator from 'react-native-tab-navigator';

再根据演示代码进行修改

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

Props

TabNavigator props

prop	default	type	description
sceneStyle	inherited	object (style)	定义渲染场景
tabBarStyle	inherited	object (style)	为TabBar定义样式
tabBarShadowStyle	inherited	object (style)	为tabBar定义阴影样式
hidesTabTouch	false	boolean	禁用Tab的onPress不透明度

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	返回项目图标
renderSelectedIcon	none	function	返回选中的项目图标
badgeText	none	string or number	项目徽章的文字
renderBadge	none	function	返回项目徽章
title	none	string	项目标题
titleStyle	inherited	style	项目标题的样式
selectedTitleStyle	none	style	所选项目标题的样式
tabStyle	inherited	style	选项卡的样式
selected	none	boolean	返回是否选中该项目
onPress	none	function	Item的onPress方法
allowFontScaling	false	boolean	允许标题的字体缩放
accessible	none	boolean	指示此项目是否为辅助功能元素
accessibilityLabel	none	string	覆盖屏幕阅读器的文本
testID	none	string	用于在端到端测试中找到此项目

阶段性演示：

3，react-native-swiper（轮播）

GitHub地址：https://github.com/leecade/react-native-swiper
安装：

npm i react-native-swiper --save
或者
yarn add react-native-swiper

示例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Swiper from 'react-native-swiper';

const styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})

export default class Swiper extends Component {
  render(){
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    );
  }
}

AppRegistry.registerComponent('myproject', () => Swiper);

Basic

Prop	Default	Type	Description
horizontal	true	bool	如果true，滚动视图的子项水平排列成行而不是垂直排列
loop	true	bool	设置为false禁用连续循环模式。
index	0	number	初始幻灯片的索引号。
showsButtons	false	bool	设置为true使控制按钮可见。
autoplay	false	bool	设置为true启用自动播放模式。
onIndexChanged	(index) => null	func	用户滑动时使用新索引调用

4，react-native-router-flux（路由）

GitHub地址：https://github.com/aksonov/react-native-router-flux
安装：
npm install react-native-router-flux --save
或者
yarn add react-native-router-flux

先导入包

import { Router, Stack, Scene } from 'react-native-router-flux'

模板示例

  <Router>
    <Stack key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="register" component={Register} title="Register"/>
      <Scene key="home" component={Home}/>
    </Stack>
  </Router>

API配置项：
https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md