22個React-Native(RN)項目常用第三方組件使用方法和BUG匯總

組件名

  1. "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>
    )
  }
}
  1. "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>
    )
  }
}
  1. "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>
    )
  }
}
  1. "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>
    )
  }
}
  1. "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>
    )
  }
}
  1. "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>
    )
  }
}
  1. "react-native-picker": "^4.3.7"

平臺適應性: 跨平臺
作用:
1.彈出選擇選擇列表:如時間選擇器,
2.級聯(lián)選擇:如日期選擇器圃酵,地址選擇器等。當選擇1級列表某一項的時候,次級列表自動切換
安裝使用:

  1. npm install react-native-picker --save
  2. react-native link
  3. 如果出現(xiàn)了問題,那么直接去MainJava去自行導入和new分配
  4. IOS推薦用點我打開

參考的數(shù)據(jù)結(jié)構寫法
React-Native-picker使用最詳細

  1. "react-native-root-toast": "^3.0.1",

平臺適應性: 跨平臺
作用: 用于顯示一個全局的彈窗提示,3.5秒后自動消失
說明: 全部用JS實現(xiàn),無任何原生,可以看做一個全局組件
安裝: npm install react-native-root-toast --save
全部配置
使用方式: 最好封裝一個一個組件

  1. 函數(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);
  1. 組件方式
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>;
    }
}


  1. "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>)
    }
}
  1. "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í)行過了
  1. "react-native-swiper": "^1.5.13",

平臺適應性: android和iOS

使用方法
參看說明文檔

該組件常見BUG,

  • 使用ScrollView,ListView,FlatList一類的組件嵌套該組件,造成滾動過后的圖片消失,需要設置ScrollView,ListView,FlatList的removeClippedSubviews={false}
    參考鏈接
  • 使用該組件,嵌套兩個同級組件出現(xiàn)的問題,不渲染
    參考鏈接
  • 其他一些問題
  1. "react-native-vector-icons": "^5.0.0",
    參考鏈接
    說明: 通常用阿里矢量圖代替

  2. "react-navigation": "^2.6.2",
    參考官網(wǎng)說明

  3. "react-navigation-redux-helpers": "^2.0.2",
    參考官網(wǎng)說明

  4. "react-redux": "^5.0.7",
    參考官網(wǎng)說明

  5. "redux": "^4.0.0",
    參考官網(wǎng)說明

  6. "redux-actions": "^2.4.0",
    參考官網(wǎng)說明

  7. "redux-form": "^7.4.2",
    參考官網(wǎng)說明

  8. "redux-thunk": "^2.3.0",
    說明: 異步中間件
    參考官網(wǎng)說明

其他推薦redux-saga,難度比thunk要難點

  1. "babel-polyfill": "^6.26.0",
    說明: ES6 的boundle
    參考官網(wǎng)說明
    使用,在index入口,引入即可

  2. "url-search-params-polyfill": "^5.0.0"
    說明: 類(或者說構造函數(shù))UrlSearchParams的墊片
    使用,在index入口,引入即可

  3. "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();
    }
}
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谊路,一起剝皮案震驚了整個濱河市讹躯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缠劝,老刑警劉巖潮梯,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異惨恭,居然都是意外死亡秉馏,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門喉恋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沃饶,“玉大人,你說我怎么就攤上這事轻黑『簦” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵氓鄙,是天一觀的道長馆揉。 經(jīng)常有香客問我,道長抖拦,這世上最難降的妖魔是什么升酣? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮态罪,結(jié)果婚禮上噩茄,老公的妹妹穿的比我還像新娘。我一直安慰自己复颈,他們只是感情好绩聘,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著耗啦,像睡著了一般凿菩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上帜讲,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天衅谷,我揣著相機與錄音,去河邊找鬼似将。 笑死获黔,一個胖子當著我的面吹牛蚀苛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播肢执,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼枉阵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了预茄?” 一聲冷哼從身側(cè)響起兴溜,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎耻陕,沒想到半個月后拙徽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡诗宣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年膘怕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片召庞。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡岛心,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出篮灼,到底是詐尸還是另有隱情忘古,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布诅诱,位于F島的核電站髓堪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏娘荡。R本人自食惡果不足惜干旁,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望炮沐。 院中可真熱鬧争群,春花似錦、人聲如沸大年。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鲜戒。三九已至,卻和暖如春抹凳,著一層夾襖步出監(jiān)牢的瞬間遏餐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工赢底, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留失都,地道東北人柏蘑。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像粹庞,于是被迫代替她去往敵國和親咳焚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容