組件名
-
"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 里面的某一個元素(比如蘋果), 那么下面的代碼就會執(zhí)行寫在此處 */
console.log(`點擊了${index}`)
}}
/>
</View>
)
}
}
- "react-native-amap3d": "^1.0.2",
平臺適應性: Android + iOS, (說明:RN v0.53+ 存在一些 bug（主要影響 iOS 自定義 View）)
作用:
地圖模式切換（常規(guī)松逊、衛(wèi)星猖任、導航驳遵、夜間）
3D 建筑晴叨、路況旷赖、室內(nèi)地圖
內(nèi)置地圖控件的顯示隱藏（指南針寞宫、比例尺供炼、定位按鈕吼和、縮放按鈕）
手勢交互控制（平移涨薪、縮放、旋轉(zhuǎn)炫乓、傾斜）
中心坐標刚夺、縮放級別、傾斜度的設置末捣，支持動畫過渡
地圖事件（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彈出層,需要自己結(jié)合組件進行使用
安裝使用: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);
// 以下是觸發(fā)的事件后,對應的結(jié)果參數(shù)的值,可以進行各種定制操作
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
作用: 封裝了一個彈出模態(tài)窗,具有動畫
安裝使用: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上面的樣式不太一樣
作用: 用于在模態(tài)中顯示本機日期選擇器和時間選擇器,不用手動去調(diào)用原生的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 });
}
//選擇成功之后的回調(diào)函數(shù)
selectResult = (date) =>{
console.log(data);
// 需要手動執(zhí)行關閉日期
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.級聯(lián)選擇：如日期選擇器圃酵，地址選擇器等。當選擇1級列表某一項的時候,次級列表自動切換
安裝使用:
npm install react-native-picker --save- react-native link
- 如果出現(xiàn)了問題,那么直接去MainJava去自行導入和new分配
- IOS推薦用點我打開
參考的數(shù)據(jù)結(jié)構寫法
React-Native-picker使用最詳細
- "react-native-root-toast": "^3.0.1",
平臺適應性: 跨平臺
作用: 用于顯示一個全局的彈窗提示,3.5秒后自動消失
說明: 全部用JS實現(xiàn),無任何原生,可以看做一個全局組件
安裝: npm install react-native-root-toast --save
全部配置
使用方式: 最好封裝一個一個組件
- 函數(shù)方式
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{
// 最基礎的方法, 跳轉(zhuǎn)到第幾個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條數(shù)據(jù)循環(huán)存儲
size: 1000,
// 存儲引擎：對于RN使用AsyncStorage郭赐，對于web使用window.localStorage
// 如果不指定則數(shù)據(jù)只會保存在內(nèi)存中，重啟后即丟失
storageBackend: AsyncStorage,
// 數(shù)據(jù)過期時間确沸，默認一整天（1000 * 3600 * 24 毫秒）捌锭，設為null則永不過期
defaultExpires: 1000 * 3600 * 24,
// 讀寫時在內(nèi)存中緩存數(shù)據(jù)。默認啟用罗捎。
enableCache: true, // 你可以在構造函數(shù)這里就寫好sync的方法 // 或是在任何時候观谦，直接對storage.sync進行賦值修改 // 或是寫到另一個文件里，這里require引入
// 如果storage中沒有相應數(shù)據(jù)桨菜，或數(shù)據(jù)已過期豁状，
// 則會調(diào)用相應的sync方法捉偏，無縫返回最新數(shù)據(jù)。
// sync方法的具體說明會在后文提到
sync: require('你可以另外寫一個文件專門處理sync')
});
// 最好在全局范圍內(nèi)創(chuàng)建一個（且只有一個）storage實例泻红，方便直接調(diào)用
// 對于web
// window.storage = storage;
// 對于react native
// global.storage = storage;
// 這樣夭禽，在此**之后**的任意位置即可以直接調(diào)用storage
// 注意：全局變量一定是先聲明，后使用
// 如果你在某處調(diào)用storage報錯未定義
// 請檢查global.storage = storage語句是否確實已經(jīng)執(zhí)行過了
- "react-native-swiper": "^1.5.13",
平臺適應性: android和iOS
使用方法
參看說明文檔
該組件常見BUG,
- 使用ScrollView,ListView,FlatList一類的組件嵌套該組件,造成滾動過后的圖片消失,需要設置ScrollView,ListView,FlatList的removeClippedSubviews={false}
參考鏈接 - 使用該組件,嵌套兩個同級組件出現(xiàn)的問題,不渲染
參考鏈接 - 其他一些問題
"react-native-vector-icons": "^5.0.0",
參考鏈接
說明: 通常用阿里矢量圖代替"react-navigation": "^2.6.2",
參考官網(wǎng)說明"react-navigation-redux-helpers": "^2.0.2",
參考官網(wǎng)說明"react-redux": "^5.0.7",
參考官網(wǎng)說明"redux": "^4.0.0",
參考官網(wǎng)說明"redux-actions": "^2.4.0",
參考官網(wǎng)說明"redux-form": "^7.4.2",
參考官網(wǎng)說明"redux-thunk": "^2.3.0",
說明: 異步中間件
參考官網(wǎng)說明
其他推薦redux-saga,難度比thunk要難點
"babel-polyfill": "^6.26.0",
說明: ES6 的boundle
參考官網(wǎng)說明
使用,在index入口,引入即可"url-search-params-polyfill": "^5.0.0"
說明: 類(或者說構造函數(shù))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();
}
}
