1. 程式人生 > >(三)ReactNative踩坑集錦

(三)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’代替