【坑】React-Native android 開發(fā)踩坑記

本文采用的是

react-native init *project*

然后

react-native run-android

以運(yùn)行項(xiàng)目梁钾。
教程原文

1.java.io.IOException: Unable to delete directory...

這是由于緩存導(dǎo)致
【解決方法】

cd android

gradlew clean

參考原文

2.RN項(xiàng)目總是有緩存,如何清理之

可以直接運(yùn)行

yarn --reset-cache

3.emulator-5554 cannot be found

運(yùn)行

adb kill-serrver
adb start-server

如果仍然找不到,你需要在任務(wù)管理器里面殺掉一些占用pid的進(jìn)程

4.在RN項(xiàng)目中使用 echarts

推薦使用 native-charts

目前你可以在網(wǎng)上搜索到的解決方案大多針對 ios(直接上手使用即可)合是,對于android,你需要略作修改锭环。
依賴:

因?yàn)?WebView 控件即將于 react-native core 中移除聪全,所以我們需要安裝其插件。

要在安卓環(huán)境下使用 echarts田藐,你需要以下動作:
1.將 node_modules\native-echarts\src\components\Echarts 下 tpl.html 移動至
android/app/src/main/assets 目錄下荔烧。
2.更改 node_modules\native-echarts\src\components\Echarts 下 index.js 的代碼:

import React, { Component } from 'react';
import { View, StyleSheet, Platform } from 'react-native';

//注意在這里如此修改,可以有效解決黃頁報警以及圖標(biāo)加載慢的問題
import { WebView } from 'react-native-webview';

import renderChart from './renderChart';
import echarts from './echarts.min';

//加這么一句話以判斷你的運(yùn)行平臺是否為 ios汽久,或是 android
const iosPlatform = Platform.OS === "ios"?true:false;

export default class App extends Component {

  constructor(props) {
    super(props);
    this.setNewOption = this.setNewOption.bind(this);
  }
  

  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  setNewOption(option) {
    this.refs.chart.postMessage(JSON.stringify(option));
  }

  render() {
    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={Platform.OS !== 'ios'}
          originWhitelist={['*']}
          source={iosPlatform?require('./tpl.html'):{uri:"file:///android_asset/tpl.html"}}    //android 平臺的靜態(tài)文件必須放置在指定目錄且不能使用 require() 
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}

然后你就可以愉快地按照教程示例照葫蘆畫瓢了。

5. ReactNative運(yùn)行報錯 Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

發(fā)生這種錯誤可能是因?yàn)槟阍诖a遷移時踊餐,node_modules 內(nèi)的文件發(fā)生變化景醇,如果你運(yùn)行 npm install 之后依然報此錯誤,可能是因?yàn)?package.json 發(fā)生變化吝岭,請確保其內(nèi)容然后運(yùn)行 npm install 三痰。之后便可正常運(yùn)行 react-native run-android吧寺。

6.Execution failed for task ':app:packageDebug'. > Java heap space

發(fā)生這種錯誤可能是由于你打包的文件過大(一說不得大于350M)

7.Unable to install ---- app-debug.apk

com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE

這可能是您手機(jī)上現(xiàn)存的app與新編譯的的文件發(fā)生沖突,只需將設(shè)備上的同app卸載掉即可散劫。

7.有時候一些css樣式無法生效

這個時候你可以嘗試給樣式失效的元素添加一個容器稚机,并把樣式應(yīng)用到容器組件上試試。

8.debugger 卡頓

我遇到過一種這樣的問題获搏,RN運(yùn)行著一段時間后就發(fā)生了“調(diào)試卡死”這種奇怪的現(xiàn)象赖条,也就是說,每當(dāng)開啟調(diào)試debugger之后常熙,就變得巨慢無比纬乍,交互事件響應(yīng)會變得緩慢反應(yīng)或者直接就不反應(yīng)。當(dāng)你關(guān)閉debugger之后就會消失裸卫,并且webview嵌入頁不受此現(xiàn)象制約仿贬。這就是明擺著不給你看console.log()呀。
解決辦法:
很神奇的解決辦法墓贿,來自stackoverflow茧泪。將你手機(jī)的時間調(diào)至比你的電腦慢1分鐘即可。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聋袋,一起剝皮案震驚了整個濱河市调炬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌舱馅,老刑警劉巖缰泡,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異代嗤,居然都是意外死亡棘钞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門干毅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宜猜,“玉大人,你說我怎么就攤上這事硝逢∫逃担” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵渠鸽,是天一觀的道長叫乌。 經(jīng)常有香客問我,道長徽缚,這世上最難降的妖魔是什么憨奸? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮凿试,結(jié)果婚禮上排宰,老公的妹妹穿的比我還像新娘似芝。我一直安慰自己,他們只是感情好板甘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布党瓮。 她就那樣靜靜地躺著,像睡著了一般盐类。 火紅的嫁衣襯著肌膚如雪寞奸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天傲醉,我揣著相機(jī)與錄音蝇闭,去河邊找鬼。 笑死硬毕,一個胖子當(dāng)著我的面吹牛呻引,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吐咳,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼逻悠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了韭脊?” 一聲冷哼從身側(cè)響起童谒,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎沪羔,沒想到半個月后饥伊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蔫饰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年琅豆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片篓吁。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡茫因,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出杖剪,到底是詐尸還是另有隱情冻押,我是刑警寧澤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布盛嘿,位于F島的核電站洛巢,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏孩擂。R本人自食惡果不足惜狼渊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望类垦。 院中可真熱鬧狈邑,春花似錦、人聲如沸蚤认。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽砰琢。三九已至蘸嘶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間陪汽,已是汗流浹背训唱。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挚冤,地道東北人况增。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像训挡,于是被迫代替她去往敵國和親澳骤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

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