React-Native 使用第三方庫時遇到的坑及解決方法

運行版本:
"react-native": "0.54.1",
"react-native-navigation": "1.1.407",
"jcore-react-native": "^1.2.5",
"jpush-react-native": "^2.2.0",
"react-native-swiper": "1.5.13",
"react-native-tab-navigator": "0.3.4"

1.安卓環(huán)境在react-native-navigation的導航環(huán)境下六水,部分功能在頁面返回后缺失,如react-native-swiper輪播失效,react-native-scrollable-tab-view的UI效果失靈

解決方法如下步驟:
第一步:~項目路徑/node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java
最下方加上這段代碼

//先import
import com.facebook.react.shell.MainReactPackage;

//最下方加上
@Nullable
    public abstract MainReactPackage readyMainReactPackage();

第二步:~項目目錄/node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactGateway.java
將原來的getPackages的方法替換為:

@Override
        protected List<ReactPackage> getPackages() {
            List<ReactPackage> result = new ArrayList<>();

            List<ReactPackage> additionalReactPackages = NavigationApplication.instance.createAdditionalReactPackages();
            if (additionalReactPackages != null)
                result.addAll(additionalReactPackages);

            if (!containsInstanceOfClass(result, MainReactPackage.class)) {
                MainReactPackage mainReactPackage = NavigationApplication.instance.readyMainReactPackage();
                if (mainReactPackage == null) {
                    result.add(new MainReactPackage());
                } else {
                    result.add(mainReactPackage);
                }
            }
            if (!containsInstanceOfClass(result, NavigationReactPackage.class)) {
                result.add(new NavigationReactPackage());
            }

            return result;
        }
2.安卓使用JPush的RN版本的時候,應用關閉的情況下點擊推送,推送跳轉無法跳轉簇搅,解決方法如下

~項目目錄/node_modules/jpush-react-native/android/src/main/java/cn/jpush/reactnativejpush/JPushModule.java
加上這段代碼

    @ReactMethod
    public void appExit() {
        mRAC = null;
    }

然后在js代碼里面的一般加載JPush方法的Main類里面加上

const JPushModuleOrigin = NativeModules.JPushModule

componentWillUnmount() {
        if (Platform.OS === 'android') {
            JPushModuleOrigin.appExit();
        }
}
3.使用native-echarts第三方插件做圖標的時候,安卓環(huán)境下會出現(xiàn)圖標無法顯示和會滑動的bug,解決方法如下

~項目目錄/node_modules/native-echarts/scr/components/Echarts/index.js下的代碼替換為如下代碼

import React, { Component } from 'react';
import { WebView, View, StyleSheet , Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {
  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  render() {

    let scalesPageToFit = Platform.OS === 'ios' ? false : true
    let source = Platform.OS === 'ios' ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'}

    return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={false}
          source = {source}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}

然后將~項目目錄/node_modules/native-echarts/scr/components/Echarts/tpl.html文件替換到
~項目目錄/android/app/src/main/assets/tpl.html即可

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末轨帜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子衩椒,更是在濱河造成了極大的恐慌蚌父,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件毛萌,死亡現(xiàn)場離奇詭異苟弛,居然都是意外死亡,警方通過查閱死者的電腦和手機阁将,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門膏秫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人做盅,你說我怎么就攤上這事缤削【焦” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵亭敢,是天一觀的道長滚婉。 經(jīng)常有香客問我,道長吨拗,這世上最難降的妖魔是什么满哪? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮劝篷,結果婚禮上哨鸭,老公的妹妹穿的比我還像新娘。我一直安慰自己娇妓,他們只是感情好像鸡,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哈恰,像睡著了一般只估。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上着绷,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天蛔钙,我揣著相機與錄音,去河邊找鬼荠医。 笑死吁脱,一個胖子當著我的面吹牛,可吹牛的內容都是我干的彬向。 我是一名探鬼主播兼贡,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼娃胆!你這毒婦竟也來了遍希?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤里烦,失蹤者是張志新(化名)和其女友劉穎凿蒜,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胁黑,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡篙程,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了别厘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虱饿。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出氮发,到底是詐尸還是另有隱情渴肉,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布爽冕,位于F島的核電站仇祭,受9級特大地震影響,放射性物質發(fā)生泄漏颈畸。R本人自食惡果不足惜乌奇,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望眯娱。 院中可真熱鬧礁苗,春花似錦、人聲如沸徙缴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽于样。三九已至疏叨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間穿剖,已是汗流浹背蚤蔓。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留糊余,地道東北人昌粤。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像啄刹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凄贩,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內容

  • 裝作一無所知的埋頭苦干 跳動的筆卻只是亂畫著不知所云的線條 沸騰的心仿佛離開了自己 化作剛才的那一陣風 吹向你 帶...
    狼神2019閱讀 167評論 8 10
  • 上次回家的時候又看到了他誓军。 半年前,他被醫(yī)生診斷為重度抑郁癥疲扎。于是所有的人開始可憐他昵时,時不時...
    彥七七閱讀 153評論 0 3