ReactNative 從環境和第一個demo說起，填坑教程

 

一、React-Native MacOS必備環境配置：

1.安裝homebrew（這東西可以理解為命令行的app商店）

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.安裝Node.js環境（解析JS所需的環境node+安裝之后你就可以用npm命令了）

brew install node

3.安裝 watchman (用來檢測代碼改變的工具)

brew install watchman

4.使用 `npm` 安裝 React Native CLI 工具

npm install -g react-native-cli

5.上面一步如果【實在不行】把NPM的源改成淘寶

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global　　

 

好了，到此為止，基本環境已經全部搞定。

 

二、先跑個官方的初始化demo壓壓驚

1.在任意文件夾下運行（此工程已經直接幫你安裝好依賴包了，所以直接跑就行）

react-native init MyFirstAppRN

2.直接打開運行iOS的工程即可，看到藍色的奇奇怪怪的非常辣雞的界面，說明運行成功了。

3.天坑提醒：在運行新的React-native工程時，切記把之前跑過的終端關掉！！！因為前一個Node服務器還在運行，這次運行肯定失敗。

我被這坑過無數，雖然無數教程本來就是他媽無法運行的，但這個init的工程我親身嘗試，確實是可以直接運行的。

4.改一行代碼試試：

index.ios.js里定義了首頁加載的姿勢，比如可以把這里改掉：

class MyFirstRN extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          這他媽就是 React Native？
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

 

此時並不需要關APP，直接按蘋果鍵cmd+R刷新下就出現最新結果了。

至此，基本技能已經掌握。

如果到此還跑不起來，再看一遍，如果還是不行，建議不要再當程序員。