[React-Native]環境配置&HelloWorld
一、前言
手頭有mac、有開發者證書,不想浪費資源,之前做過iOS開發,還會對移動開發表示關注,現在移動開發目前用Rect Native也是一個熱潮,加上之前有web開發經驗,然後就有了學習的衝動。Keep learning, make me happy!
二、環境配置
- 需要mac裝置
- 需要Xcode6.3版本以上
- 建議安裝watchman,終端命令:brew install watchman
- 安裝flow:brew install flow
三、Hello,React-Native
現在我們需要建立一個React-Native的專案,因此可以按照下面的步驟:
開啟終端,開始React-Native開發的旅程吧。
1. 安裝命令列:sudo npm install -g react-native-cli
2. 建立HelloWorld專案:react-native init HelloWorld
3. 找到建立的HelloWorld專案,雙擊HelloWorld.xcodeproj即可在xcode中開啟專案。xcodeproj是xcode的專案檔案。
4. 在xcode中,使用快捷鍵cmd + R即可啟動專案。基本的Xcode功能可以熟悉,比如模擬器的選擇等。
5. 啟動完成你應該會看到執行效果
四、初識HelloWorld工程
Xcode裡面的程式碼目錄結構暫時不用管了,開啟HelloWorld專案資料夾,找到index.ios.js檔案。
index.ios.js檔案就是React-Native JS 開發之旅的入口檔案了。 先來個感性的認識,修改一
些文字,下一篇會解讀裡面的程式碼。用文字編輯器開啟index.ios.js檔案。
(1)找到程式碼部分:
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
修改成
<Text style={styles.welcome} >
React-Native入門學習
</Text>
(2)修改welcome標籤的樣式
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
修改成:
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
},
(3)如果有前端開發經驗這些應該很容易理解,然後重新執行看效果
五、理解怎麼執行到js腳本里面的
恭喜你
如果不搞懂上面這一個原理,參考學習
六、執行官網的一個HelloWorld案例
在上面的基礎上,我們來學習官網的案例。我們通過命令創建出來的HelloWorld有點複雜,我們可以刪除重新寫一個簡單的HelloWorld開始。
參考官網第一篇教程
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
如果你只是複製到index.ios.js檔案中會出現報錯,因為程式啟動的時候找不到這個檔案中的註冊的HelloWorldApp類
修改:
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
然後cmmand+d重新Reload即可,不需要重啟應用,這也意味著React Native開發應用可以熱更新
提示:隱藏狀態列
這裡我們沒有設定文字都位置,預設就是在左上角,會跟狀態列重疊,我們可以隱藏狀態列即可
執行效果
七、真機除錯
網上好多文章講述如何iOS真機除錯,但都有問題,編譯會報錯,後來發現可能是版本不一致,我用的是目前最新版本0.40,
(1)修改Signing
(2)修改IP
真機執行效果: