React Native學習筆記

nvm、npm和nodejs的關係:https://www.cnblogs.com/qqpw/p/6597295.html

 

JS的模塊加載方案及ES6的import和export用法：https://www.cnblogs.com/dupd/p/5951311.html

 

export和module.exports的區別：

https://www.jianshu.com/p/e452203d56c4

 

介紹混合應用開發的好文：

一、《2017混合應用開發現狀》：https://refined-x.com/2017/06/23/2017%E6%B7%B7%E5%90%88%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%8E%B0%E7%8A%B6/

 

關於使用ES6語法

React、ReactNative中的es5和es6中的寫法對照：

https://www.cnblogs.com/kuailingmin/p/5476884.html

 

一個使用this時的知識點：

若是你在一個方法體定義中定義另外一個方法體，嵌套在內測的方法體想使用外側方法體的this時，須要在外側方法體重先將this定義成別的名字的變量。

例子：

methodA=()=>{

     bla bla bla...

     let that = this;

     someClass.methodB(){

         that.setState({

　　　　bla bla bla...

　　　});

     }

}

 

關於ES6寫法的坑NO.1：

問題：我在使用ES6語法編寫一個自定義class的內置自定義方法時，大部分這麼寫是OK的：

methodName(){

　　bla bla bla...

}

直到我有一次在方法體代碼中使用了this.setState時，編譯開始死活報錯，提示this.setState is undefined。

反覆檢查程序邏輯沒問題，國內狗度搜索結果讓人極度失望。想在網上查React Native的問題，必須得上神器。

解決辦法：使用谷歌搜索，在stackoverflow上一位國外大神推薦在使用ES6時這樣定義方法：

methodName=()=>{

　　this.setState{

           bla bla bla...

      }

}

試了真的就tm能夠了。。。

　　並且，在我後續調試程序的過程當中發現，凡是你打算在方法體中使用this關鍵字的，最好都用上面的定義方式，不然常常

會出現this或this.XXX取不到值的怪現象。真的是防不勝防啊！保險起見，全部方法都這麼定義才最好。只有構造方法constructor()

不能夠這麼定義，會報錯：Class may not have a non-static field named 'constructor'。可見，這種定義方式的使用範圍

是當你定義一個non static field時才適用。

　　當你定義一個static field時能夠這樣：

例以下面的例子是定義一個工具類，注意static的屬性只能定義在class定義體以外，也就是大括號以外：

 

export default class Util extends Component{
// 屏幕尺寸
static windowSize = {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height
};

 

// 基於fetch的get方法，只負責下載數據，下載後的處理操做在回調方法中實現
static getRequest(url,successCallback,failCallback){
fetch(url)
.then((response) => {return response.json();})
.then((responseData) => successCallback(responseData))
.catch((error) => failCallback(error));
};

 

// loading效果
// loading: <ActivityIndicator style={{marginTop:200}}/>
};
// loading效果
Util.loading = <ActivityIndicator style={{marginTop:200}}/>;

 

大神回答帖地址：https://stackoverflow.com/questions/39210971/this-setstate-is-undefined

ReactNative中的Navigator組件已通過時，該如何繼續使用？

轉自：https://blog.csdn.net/gl_mine_csdn/article/details/73740868

當要引入Navigator的使用一般的作法是：

import {Navigator} from "react-native"

當咱們進行執行react native 程序的時候 告知咱們 該組件已經不存在 ：

 

'Navigator is deprecated and has been removed from this package. It can now be installed ' +
      'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +
      'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'

此時咱們將要作的即是經過引用：

 

react-native-deprecated-custom-components 來導入 Navigator 組件

步驟以下：

一、打開程序的根目錄（也就是和 Package.json 同級的目錄）

二、使用cmd 命令工具 或者 Git Bash Here (前提是安裝過GIT工具)  

      輸入命令：    npm  install   react-native-deprecated-custom-components  --save 

(下載並保存，此時package.json 文件 中 便會增長一條對該庫的引用表明成功)

三、在使用Navigator的地方引用即可使用。

引用方式：import {Navigator} from "react-native-deprecated-custom-components" 

注意：在引用時 必定在導入 Navigator的時候加上 {}  要否則會報錯。

同時：當我在使用  npm  install   react-native-deprecated-custom-components  --save  時報錯

解決方法：

使用命令： npm  i   react-native-deprecated-custom-components  --save 

若是此方法還不能解決。

解決方法：

使用yarn命令（前提是本身有yarn的配置環境）

使用命令：yarn add  react-native-deprecated-custom-components  --save 

最終解決Navigator的下載。

親測：在mac上使用npm命令安裝react-native-deprecated-custom-components包之後不行，使用yarn命令之後能夠。

 

 

 

react native組件的生命週期

轉自：https://www.race604.com/react-native-component-lifecycle/

 iOS真機測試設置步驟：

一、使用appleID建立開發者帳號，生成描述文件

xcode偏好設置 > account > appleIDs點"+"按鈕 > 輸入id密碼之後點manage certificats按鈕 > +一個iOS開發者 > done

 

二、將待測工程跟你的開發者帳號掛鉤:

點擊xcode中的工程名DoubanProject > 選中右側general面板中的targets欄目DoubanProject，修改Bundle Identifier使其惟一，而後往下看，在team下拉框中選擇本身的開發者帳號，查看provisioning profile和signing certificate有沒有值，沒有就點retry，若是不行就查看bundle identifier是否是惟一的，直到這兩個值正常 > 回到targets欄目選中DoubanProjectTests,查看Host Application和team設置對不對，不對就改正。

 

三、設置待測工程生成的jsbundle文件在你的iPhone裏運行

(1)將你的iPhone鏈接mac電腦，並信任這臺電腦。

(2)打開DoubanProject工程、DoubanProject文件夾下的AppDelegate.m文件，使用「//「註釋掉原來的jsCodeLocation賦值語句，新建

jsCodeLocation = [NSURL URLWithString:@"http://192.168.2.105:8081/index.bundle?platform=ios&dev=true"];

其中192.168.2.105是局域網中mac電腦的ip，須要注意的是index.bundle這個寫法，由於舊版本的react native模板是由index.ios.js啓動，因此若是你使用的是舊版本的react native，此處要寫index.ios.bundle。

(3)在xcode運行設備中選擇你的iPhone(就是你在mac電腦裏選不一樣手機型號來模擬畫面的那個地方)，點播放鍵運行。

(4)第一次運行時，在你的iPhone裏自動安裝完DoubanProject APP之後，運行會報錯。先退出app，再進入手機的設置>通用>設備管理，信任本身的appleID，再從新使用xcode run一次便可。