(三)ReactNative踩坑集錦
一、
初始化state報錯:null is not a object (evaluating‘this.state.value’)
語法:
getInitialState () {
return {num: 0};
}
以上的初始化state是使用createClass 建立元件時的語法,當我們用es6語法時,需要放在constructor ()內
//用到es6的時候初始化state應該在constructor ()內,而不是用getInitialState()
class Search extends Component {
constructor () {
super ();
this.state = {
....
}
}
...
}
二、
expected a component class,got[object Object]
遇到該錯誤原因大致是render方法中的元件程式碼寫錯了,RN元件都是大寫開頭,如:,所以遇到這個錯誤先檢查自己程式碼是否出現了小寫開頭。
三、
紅屏問題”Could not get BatchedBridge, make sure your bundle is packaged correctly”
解決方案:在報錯的頁面,點選選單鍵,選擇Dev Settings,點選Dubug server host & port for device,設定IP和埠,cmd命令ipconfig找出自己的本機ip後面接8081埠,然後返回重新整理介面或者重新執行,ok了。
如果上述步驟仍舊不能解決繼續看:
在package.json中的”scripts”中新增
“bundle-android”:”react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/”,
新增完後,根目錄下執行:
react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/,
如果出現如下錯誤:
沒有assets目錄,手動新增下重新執行即可。
四、
昨天寫了個小功能,也運行了,可以沒有問題,回到家後,再次開啟執行專案,發現專案介面成了建立專案時的歡迎介面,reload後報錯,就想到估計是DEV Setings沒有設定Debug servers host,(ip:8081).reload後就可以了。
五、
Execution failed for task ‘:app:compileDebugJavaWithJavac’.
Could not find tools.jar
參考:
android - Execution failed for task ‘:app:compileDebugJavaWithJavac’
jdk環境變數配置
錯誤的原因是沒有安裝java SDK.官網選擇下載對應的SDK。安裝即可。
注意:自定義安裝後,自定義路徑下面下的是jre,比如,我自定義安裝路徑為F:\ProgramFiles\java\jre1.8.0_111,java\jre1.8.0_111是預設安裝路徑的欄位,照搬過來。安裝成功後,
JDK被放在了C:\Program Files\Java\jdk1.8.0_111目錄下面。
安裝成功後,需要設定環境變數。[檢視原文]
右擊“我的電腦”=》”system”=》“advanced system setting”=》“environment variable”
1)在系統變數裡新建JAVA_HOME變數,變數值為:C:\Program Files\Java\jdk1.8.0_111(根據自己的安裝路徑填寫)
2)新建classpath變數,變數值為:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
3)在path變數(已存在不用新建)新增變數值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin(注意變數值之間用“;”隔開)
4)“開始”–>“執行”–>輸入“javac”–>”Enter”,如果能正常列印用法說明配置成功!
補充環境變數:
JAVA_HOME:jdk的安裝路徑
classpath:java載入類路徑,只有類在classpath中java命令才能識別,在路徑前加了個”.”表示當前路徑。
path:系統在任何路徑下都可以識別java,javac命令
六、
Error:Could not expand ZIP *.aar
解決方法:出現這種情況一般是許可權問題,所以使用管理員身份執行即可解決(右鍵該檔案,選擇管理員取得許可權)
如果是android請在取得許可權後clean project或者到專案目錄android/app/下刪除build資料夾在執行
七、
使用realm資料庫需要注意的幾點:
在 MainApplication 中新增
import io.realm.react.RealmReactPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RealmReactPackage()
);
}
..\node_modules\realm\android\build\outputs\aar\下的aar檔案需要右鍵選擇管理員獲取所有權
八、
當我在js中使用map函式時,竟然報了一個警告:warning: each child in an array or iterator should have a unique key prop。
雖然警告並不影響介面,但是對於強迫症的我來說就。。。
一下是我的程式碼:
<ScrollView style={styles.container}>
<View style={styles.container}>
{
cars.map((value , key) => {
return (
<View style={styles.realmItem}>
<View style={styles.realmItemLeft}>
<Text style={ styles.realmItemText }>{value.name}</Text>
<Text style={ styles.realmItemText }>{value.dept}</Text>
</View>
<View style={styles.realmItemRigth}>
<Text>{value.phone}</Text>
</View>
</View>
);
})
}
</View>
</ScrollView>
解決辦法:在view的屬性中加入key=key就可以了,下面是更改後的程式碼:
<ScrollView style={styles.container}>
<View style={styles.container}>
{
cars.map((value , key) => {
return (
<View key={key} style={styles.realmItem}>
<View style={styles.realmItemLeft}>
<Text style={ styles.realmItemText }>{value.name}</Text>
<Text style={ styles.realmItemText }>{value.dept}</Text>
</View>
<View style={styles.realmItemRigth}>
<Text>{value.phone}</Text>
</View>
</View>
);
})
}
</View>
</ScrollView>
九、
realm at path already opened on current thread with different schema
當我們在應用的兩個功能模組中如果都採用realm資料庫,那麼我們需要在使用過realm後關閉改簽資料連線物件即:
realm = new Realm({schema: [user]});
realm.close();
如果不關閉,第二次開啟realm時就會出現該錯誤
十、
從0.44版本開始,Navigator不再從‘react-native’中引入,而是需要npm install react-native-deprecated-custom-components –save並在程式碼中import {Navigator} from ‘react-native-deprecated-custom-components’.
同樣從0.44版本開始,BackAndroid元件不在出現,而是用用‘BackHandler’代替