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

本文采用的是

react-native init *project*

然后

react-native run-android

以運行項目。
教程原文

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

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

cd android

gradlew clean

參考原文

2.RN項目總是有緩存,如何清理之

可以直接運行

yarn --reset-cache

3.emulator-5554 cannot be found

運行

adb kill-serrver
adb start-server

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

4.在RN項目中使用 echarts

推薦使用 native-charts

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

因為 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';

//加這么一句話以判斷你的運行平臺是否為 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運行報錯 Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

發(fā)生這種錯誤可能是因為你在代碼遷移時,node_modules 內(nèi)的文件發(fā)生變化,如果你運行 npm install 之后依然報此錯誤,可能是因為 package.json 發(fā)生變化,請確保其內(nèi)容然后運行 npm install 。之后便可正常運行 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運行著一段時間后就發(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容