1. 程式人生 > >React-Native 點滴記錄

React-Native 點滴記錄

1、SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

 

解決方法:編輯在工程根目錄/android/local.properties檔案,如果沒有請新建,在檔案中寫入

sdk.dir=/Users/xxx/Library/Android/sdk  =後面是你的SDK安裝目錄


2. 幾種異常情況分析

(1)正常情況總結

  • onPress屬性方法中只要未使用箭頭函式呼叫方法時,方法名後面都不可以帶小括號。
  • 使用前兩種方法處理事件時,不可傳遞引數;如果想傳遞引數就必須使用第三種方式
  • 在不需要傳遞引數時,儘量使用前兩種方式

(2)異常情況總結

  • 前兩種方式如果在呼叫方法時添加了小括號,事件處理會在載入完頁面之後自動執行。
  • 在最新版本中Button或者TouchableOpacity標籤中,onPress屬性在呼叫事件處理方法時使用第一種方式,但是未在構造方法中繫結。使用this.handleEvent方式也可呼叫事件處理方法,如果後面也加上小括號,同樣會出現頁面載入完畢,自動載入事件處理方法的狀況。
  • 第三種方式存在一定問題,每當Button或者TouchableOpacity繪製的時候,都會建立一個不同的callback。大多數情況下,這種方法是沒有問題的。但是當callback被當做屬性傳遞到下級元件的時候,這些下級元件會執行多餘的重新繪製動作。

3、刪除Xcode快取記錄

按快捷鍵 shift+command+G 或者 Finder圖示點選右鍵選 前往資料夾... 調出前往資料夾框

在裡面輸入如下 
/Users/(自己電腦名字)/Library/Developer/Xcode/DerivedData

 

 

 

5、React-native error: PCH was compiled with module cache path 'but the path is currently 

開啟專案目錄ios資料夾找到---->build---->ModuleCache,刪除再次執行react-native run-ios

 

6、Android Failed Override

Native moduleNative module RCTCameraModule tried to override RCTCameraModule for module name RCTCameraModule. If this was your intention, set canOverrideExistingModule=true 

找到android/app/src/main/java/com/xxx/MainApplication.java,找到裡面的重複的引用,把重複的部分刪除後再執行react-native run-android

7、Unhandled JS Exception: TypeError: undefined is not an object (evaluating'this._subscribableSubscriptions.forEach')

 

https://github.com/facebook/react-native/issues/17348  

The issue is caused by the [email protected],back to 3.2.2

npm install -save [email protected]

 

  (1)  通過navigate函式實現介面之間跳轉:this.props.navigation.navigate('Home');

         引數為我們在StackNavigator註冊介面元件時的名稱。同樣也可以從當前頁面返回到上一頁:this.props.navigation.goBack();  

(2)跳轉時傳值:this.props.navigation.navigate('Home', { key: 'value' });

(3)獲取值:{ this.props.navigation.state.param.key }

 

8、CodePush熱更新

    code-push app add 新增一個新的APP

        code-push app add MyApp Android react-native

    code-push app add MyApp iOS react-native

  釋出更新

    code-push release-react <appName> <platform>

        例:code-push release-react MyApp-iOS ios

                code-push release-react MyApp-Android android

 

9、使用Flatlist時IOS可以完整展示ListFooterComponent底部佈局,遇到Android展示不全

        取消Flatlist的父佈局高度設定便可以解決此問題

 

10、按鈕限制圓角後出現毛刺問題

        設定overFlow=‘hidden’即可解決

11、View中的Text文字實現換行只要在需要換行處加一個“{\n}”

        <Text style={{fontSize:12}}>第一行{"\n"}第二行</Text>