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,{'
'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

此时并不需要关APP,直接按苹果键cmd+R刷新下就出现最新结果了。

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

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

原文地址:https://www.cnblogs.com/rayshen/p/5501923.html