運行rn代碼的過程中,不小心關閉了終端:
不用擔心,其實只要你切到項目的根目錄,命令行輸入npm start
即可,這樣即可開發(fā)終端監(jiān)聽。實際上也是node.js的監(jiān)聽服務開啟而已。在該目錄下可以找到rn的所有的參數屬性等等:
flex屬性聲明在:/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js如何運行官方Demo呢
這里是reactnative的官方demo地址,要想運行這個demo一定要嚴格按照官方文檔來,否則會走彎路(像我一樣,哈哈),如果點擊的是download zip,那么你就會遇到一系列錯誤:運行出來的程序出現紅屏。蛋疼的要死,執(zhí)行了npm start
也不管用,所以還是老老實實的用git clone下來然后再打開運行就沒有問題了。
- webStorm 在mac下的真對react-native的比較實用的快捷鍵分享
快捷鍵 | 執(zhí)行 |
---|---|
cmd + d | 在下一行復制當前行 |
command + b / 點擊 | 定位方法 |
command + option +L | 代碼格式化 |
command + e | 打開最近打開的文件或者項目 (直接支持文件名搜索) |
command + / | 注釋/取消注釋 |
command + shift + / | 注釋/取消注釋 |
control + tab | 切換上次打開的文件 |
command + shift + f | 全局搜索內容 |
command + f | 當前頁搜索 |
command + shift + o | 搜索文件 |
command + shift + v | 選擇粘貼剪切板上的內容 |
command + 退格鍵 | 刪除當前鼠標所在行 |
command + option + 左右箭頭 | 定位到上次編輯的位置 |
command + option + 上下箭頭 | 依次順序輪換激活打開的標簽頁 |
command + j | 輸出模板 |
command + b | 跳到變量聲明處 |
F2 或Fn+F2 | 高亮錯誤或警告快速定位 |
在哪里搜索第三方庫和第三方插件
地址:JS.coach或者github,一般是由JavaScript編寫的一般都是支持iOS和Android的。react-native init時卡住腫么辦
我個人建議多等一會應該就可以了,但是等了很久都不可以的話
譯注:由于眾所周知的網絡原因,react-native命令行從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist```
另,執(zhí)行init時切記不要在前面加上sudo(否則新項目的目錄所有者會變?yōu)閞oot而不是當前用戶,導致一系列權限問題,請使用chown修復)。 又,react-native.cn中文網提供了完整的綠色純凈新項目包。完整打包全部iOS和Android的第三方依賴,只要環(huán)境配置正確,無需科學上網漫長等待,解壓后即可直接運行。
* 不要重復創(chuàng)建工程
一般情況下,init一個HelloWorld工程一出來看下工程包的大小,200M+,是不是感到很無奈,針對初學者沒創(chuàng)建一個demo,就要init一個工程這簡直太low,最少要考慮一下你電腦硬盤的感受啊,有的人會注釋掉之前寫的代碼,但是一個文件里注釋的不注釋的一大推看起來十分的凌亂,我的建議是大家在相同的目錄下創(chuàng)建一個幾乎同名的js文件,例如`index2.ios.js`,復制原版的`index.ios.js`也可以,然后打開Appdelegate.m文件,修改為你新文件的目錄就可以了,例如:
ES6: jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index2.ios" fallbackResource:nil];
ES5: jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index2.ios.bundle?platform=ios&dev=true"];
這樣你就可以在新文件里面編輯或者測試的新代碼了,而不用重復的創(chuàng)建工程。
* 根據package.json恢復node_modules
npm install ```
在引用第三方庫的時候盡量加上--save
這一步中--save或--save-dev參數是非常重要的。rnpm需要根據package.json文件中的dependencies和devDependencies記錄來鏈接庫。
例:npm install xxx --save
- 是不是感覺state和props有些類似?
一般區(qū)分兩個的原則是,可變的放在state中,不可變的放在props中。
初始化
es5
class *** extends React.Component{ getInitialState: function() { return {liked: false}; }}```
es6
class *** extends React.Component{ constructor(props) { super(props); this.state = {liked: false}; }}```
修改值es5和es6中使用方法相同。this.setState(新的state對象);
讀取值其實就是讀取一個js對象。
在RN中是沒有button的,但是有類似的組件,而且在RN中,連Text都有onPress事件(也就是點擊事件)這是跟很多語言不一樣的地方。
~/.bashrc
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
webstorm 雙擊shift鍵,就會出現search anywhere,這個是我無意間瞎按按出來的,大家可以多嘗試,學習新語言就是填坑的過程,不要怕遇到問題,解決問題的過程就是學習的過程。
webstorm -> preferences-> File and CodeTemplates 設置創(chuàng)建工程初始化文件
Command `run-ios` unrecognized. Did you mean to run this inside a react-native project?```
解決方法
`Have you installed the latest version of react-native-cli globally?`
npm uninstall -g react-native-cli
npm install -g react-native-cli
npm install --save react-native@latest