本文采用的是
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分鐘即可。