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