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刷新下就出现最新结果了。

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

如果到此还跑不起来，再看一遍，如果还是不行，建议不要再当程序员。