组件名
-
"react-native-actionsheet": "^2.4.2"
平台适应性: 跨平台
作用: 一个自定义ActionSheet,默认从手机底部弹出一个选择列表供选择
安装使用:npm install react-native-actionsheet --save
参考的全部配置
参考的全部说明文件
import ActionSheet from 'react-native-actionsheet'
class Demo extends React.Component {
showActionSheet = () => {
this.ActionSheet.show()
}
render() {
return (
<View>
<Text onPress={this.showActionSheet}>点我打开弹出该组件</Text>
<ActionSheet
ref={o => this.ActionSheet = o}
title={'选择喜欢的食物?'}
options={['苹果', '梨子', '取消']}
cancelButtonIndex={2}
destructiveButtonIndex={1}
onPress={(index) => {
/* 如果点击了 列表options 里面的某一个元素(比如苹果), 那么下面的代码就会执行写在此处 */
console.log(`点击了${index}`)
}}
/>
</View>
)
}
}
- "react-native-amap3d": "^1.0.2",
平台适应性: Android + iOS, (说明:RN v0.53+ 存在一些 bug（主要影响 iOS 自定义 View）)
作用:
地图模式切换（常规、卫星、导航、夜间）
3D 建筑、路况、室内地图
内置地图控件的显示隐藏（指南针、比例尺、定位按钮、缩放按钮）
手势交互控制（平移、缩放、旋转、倾斜）
中心坐标、缩放级别、倾斜度的设置，支持动画过渡
地图事件（onPress、onLongPress、onLocation、onStatusChange）
地图标记（Marker）自定义信息窗体
自定义图标
折线绘制（Polyline）
多边形绘制（Polygon）
圆形绘制（Circle）
热力图（HeatMap）
海量点（MultiPoint）
离线地图
安装使用:npm i react-native-amap3d --save
安装配置
相关推荐:
import { MapView } from 'react-native-amap3d'
class Demo extends React.Component {
render() {
return (
<View>
<MapView
coordinate={{
latitude: 39.91095,
longitude: 116.37296,
}}
/>
</View>
)
}
}
- "react-native-image-crop-picker": "^0.21.2",
平台适应性: iOS / Android
作用: 图像选择器，支持相机，可配置压缩，多个图像和裁剪, 不带Actionsheet弹出层,需要自己结合组件进行使用
安装使用:npm i react-native-image-crop-picker --save
安装配置
参考的使用配置
import ImagePicker from 'react-native-image-crop-picker'
class Demo extends React.Component {
open = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
if (response.uri && Platform.OS !== 'android') {
// 从uri截取fileName
const temp = response.uri.split('/');
response.fileName = temp[temp.length - 1];
// 去掉 file://
response.uri = response.uri.substring(7);
}
});
}
render() {
return (
<View>
<Text onPress={()=>{
this.open()
}}>点我打开图片选择器</Text>
</View>
)
}
}
- "react-native-image-picker": "^0.26.10",
平台适应性: iOS / Android
作用: 图像选择器，支持相机, 自带Actionsheet弹出层
安装使用:npm i react-native-image-picker --save
安装配置
参考的使用配置
import ImagePicker from 'react-native-image-picker';
class Demo extends React.Component {
const options = {
title: '选择图片',
customButtons: [{ name: '自定义按钮', title: '自定义按钮的文字' }],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
open = () => {
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
// 以下是触发的事件后,对应的结果参数的值,可以进行各种定制操作
if (response.didCancel) {
console.log('取消了按钮');
} else if (response.error) {
console.log('打开出错 ', response.error);
} else if (response.customButton) {
console.log(点击了自定的按钮 ', response.customButton);
} else {
const source = { uri: response.uri }
}
});
}
render() {
return (
<View>
<Text onPress={()=>{
this.open()
}}>点我打开选择器</Text>
</View>
)
}
}
- "react-native-modal": "^6.5.0",
平台适应性: iOS / Android
作用: 封装了一个弹出模态窗,具有动画
安装使用:npm i react-native-modal --save
参考的使用配置
import Modal from "react-native-modal";
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
isModalVisible: false
}
}
_toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
}
render() {
return (
<View>
<Text onPress={()=>{
this._toggleModal()
}}>点我打开Modal</Text>
<Modal isVisible={this.state.isModalVisible}>
<View>
<Text>打开了Modal!</Text>
<TouchableOpacity onPress={this._toggleModal}>
<Text>点击我隐藏Modal</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
)
}
}
- "react-native-modal-datetime-picker": "^6.0.0",
平台适应性: iOS / Android, 在Android和IOS上面的样式不太一样
作用: 用于在模态中显示本机日期选择器和时间选择器,不用手动去调用原生的TimePicker和DatePicker
说明: 支持全部的RN官方的组件datepickerios的全部配置项目
安装使用:npm install react-native-modal-datetime-picker --save
参考的使用配置
import DateTimePicker from 'react-native-modal-datetime-picker';
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
isVisible: false
}
}
_toggleModal = () => {
this.setState({ isVisible: !this.state.isVisible });
}
//选择成功之后的回调函数
selectResult = (date) =>{
console.log(data);
// 需要手动执行关闭日期
this._toggleModal()
}
render() {
return (
<View>
<Text onPress={()=>{
this._toggleModal()
}}>点我打开日期选择器</Text>
<DateTimePicker
isVisible={this.state.isVisible}
onConfirm={this.selectResult}
onCancel={this._toggleModal}
/>
</View>
)
}
}
- "react-native-picker": "^4.3.7"
平台适应性: 跨平台
作用:
1.弹出选择选择列表：如时间选择器，
2.级联选择：如日期选择器，地址选择器等。当选择1级列表某一项的时候,次级列表自动切换
安装使用:
npm install react-native-picker --save- react-native link
- 如果出现了问题,那么直接去MainJava去自行导入和new分配
- IOS推荐用点我打开
参考的数据结构写法
React-Native-picker使用最详细
- "react-native-root-toast": "^3.0.1",
平台适应性: 跨平台
作用: 用于显示一个全局的弹窗提示,3.5秒后自动消失
说明: 全部用JS实现,无任何原生,可以看做一个全局组件
安装: npm install react-native-root-toast --save
全部配置
使用方式: 最好封装一个一个组件
- 函数方式
import Toast from 'react-native-root-toast';
let toast = Toast.show('This is a message', {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0,
onShow: () => {
// 开始的那一刻 do anything code
},
onShown: () => {
// 完成 do anything code
},
onHide: () => {
// 隐藏的的那一刻 do anything code
},
onHidden: () => {
// 隐藏 do anything code
}
});
// 自动关闭
setTimeout(function () {
Toast.hide(toast);
}, 500);
- 组件方式
import React from 'react-native';
import Toast from 'react-native-root-toast';
class Demo extends React.Component{
constructor() {
super(...arguments);
this.state = {
visible: false
};
}
componentDidMount() {
setTimeout(() => this.setState({
visible: true
}), 2000); // 2秒之后自动显示toast
setTimeout(() => this.setState({
visible: false
}), 5000); //5秒之后自动隐藏toast
};
render() {
return <Toast
visible={this.state.visible}
position={50}
shadow={false}
animation={false}
hideOnPress={true}
>hello RN</Toast>;
}
}
- "react-native-scrollable-tab-view": "^0.8.0",
平台适应性: IOS / Android
安装:npm install react-native-scrollable-tab-view --save
推荐使用方式,(官方的是ES5的Demo)
import ScrollableTabView from "react-native-scrollable-tab-view"
class Demo extends React.Component{
// 最基础的方法, 跳转到第几个Tab, this.tabView.goToPage(0)
render = () => {
return (<ScrollableTabView
ref={(tabView) => {
this.tabView = tabView;
}}>
<Text tabLabel='Tab 1'>促销</Text>
<Text tabLabel='Tab 2'>头条</Text>
<Text tabLabel='Tab 3'>教育</Text>
<Text tabLabel='Tab 4'>资讯</Text>
<Text tabLabel='Tab 5'>智能</Text>
</ScrollableTabView>)
}
}
- "react-native-storage": "^0.2.3",
平台适应性: 全部
作用:本地持久存储的封装
安装:npm install react-native-storage@beta
使用: 增删改查,远程同步更新
一定要先初始化,同时注意,key永远不要用下划线
// 首先初始化
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';
const storage = new Storage({
// 最大容量，默认值1000条数据循环存储
size: 1000,
// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中，重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
defaultExpires: 1000 * 3600 * 24,
// 读写时在内存中缓存数据。默认启用。
enableCache: true, // 你可以在构造函数这里就写好sync的方法 // 或是在任何时候，直接对storage.sync进行赋值修改 // 或是写到另一个文件里，这里require引入
// 如果storage中没有相应数据，或数据已过期，
// 则会调用相应的sync方法，无缝返回最新数据。
// sync方法的具体说明会在后文提到
sync: require('你可以另外写一个文件专门处理sync')
});
// 最好在全局范围内创建一个（且只有一个）storage实例，方便直接调用
// 对于web
// window.storage = storage;
// 对于react native
// global.storage = storage;
// 这样，在此**之后**的任意位置即可以直接调用storage
// 注意：全局变量一定是先声明，后使用
// 如果你在某处调用storage报错未定义
// 请检查global.storage = storage语句是否确实已经执行过了
- "react-native-swiper": "^1.5.13",
平台适应性: android和iOS
使用方法
参看说明文档
该组件常见BUG,
- 使用ScrollView,ListView,FlatList一类的组件嵌套该组件,造成滚动过后的图片消失,需要设置ScrollView,ListView,FlatList的removeClippedSubviews={false}
参考链接 - 使用该组件,嵌套两个同级组件出现的问题,不渲染
参考链接 - 其他一些问题
"react-native-vector-icons": "^5.0.0",
参考链接
说明: 通常用阿里矢量图代替"react-navigation": "^2.6.2",
参考官网说明"react-navigation-redux-helpers": "^2.0.2",
参考官网说明"react-redux": "^5.0.7",
参考官网说明"redux": "^4.0.0",
参考官网说明"redux-actions": "^2.4.0",
参考官网说明"redux-form": "^7.4.2",
参考官网说明"redux-thunk": "^2.3.0",
说明: 异步中间件
参考官网说明
其他推荐redux-saga,难度比thunk要难点
"babel-polyfill": "^6.26.0",
说明: ES6 的boundle
参考官网说明
使用,在index入口,引入即可"url-search-params-polyfill": "^5.0.0"
说明: 类(或者说构造函数)UrlSearchParams的垫片
使用,在index入口,引入即可"react-native-splash-screen": "^3.1.1",
平台适应性: 全平台
作用: 启动屏
安装:npm i react-native-splash-screen --save
react-native link react-native-splash-screen
参考Android/IOS配置
使用:
import SplashScreen from 'react-native-splash-screen'
class Demo extends React.Component {
componentDidMount() {
// 在需要的页面,关闭启动屏
SplashScreen.hide();
}
}
