ReactNative 从环境和第一个demo说起,填坑教程
2016-05-17 15:46
726 查看
一、React-Native MacOS必备环境配置:
1.安装homebrew(这东西可以理解为命令行的app商店)
2.安装Node.js环境(解析JS所需的环境node+安装之后你就可以用npm命令了)
3.安装 watchman (用来检测代码改变的工具)
4.使用 `npm` 安装 React Native CLI 工具
5.上面一步如果【实在不行】把NPM的源改成淘宝
好了,到此为止,基本环境已经全部搞定。
二、先跑个官方的初始化demo压压惊
1.在任意文件夹下运行(此工程已经直接帮你安装好依赖包了,所以直接跑就行)
2.直接打开运行iOS的工程即可,看到蓝色的奇奇怪怪的非常辣鸡的界面,说明运行成功了。
3.天坑提醒:在运行新的React-native工程时,切记把之前跑过的终端关掉!!!因为前一个Node服务器还在运行,这次运行肯定失败。
我被这坑过无数,虽然无数教程本来就是他妈无法运行的,但这个init的工程我亲身尝试,确实是可以直接运行的。
4.改一行代码试试:
index.ios.js里定义了首页加载的姿势,比如可以把这里改掉:
此时并不需要关APP,直接按苹果键cmd+R刷新下就出现最新结果了。
至此,基本技能已经掌握。
如果到此还跑不起来,再看一遍,如果还是不行,建议不要再当程序员。
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刷新下就出现最新结果了。
至此,基本技能已经掌握。
如果到此还跑不起来,再看一遍,如果还是不行,建议不要再当程序员。
相关文章推荐
- React Native 代码片段
- React Native-目前最火的前端技术?
- react.js 之 批量添加与删除功能
- 如何创建第一个React Native android应用
- React Native 实例 - BBC新闻客户端
- ReactiveCocoa基础和一些常见类介绍
- 配置redux react 以及webpack
- 在Windows下搭建React Native Android开发环境
- React入门教程(二)
- ReactNative 第四节 实例开发
- React/React Native 的ES5 ES6写法对照表
- [转] 在React Native中使用ART
- react-native学习之环境安装
- Reactive Cocoa详解(1)----神奇的RAC宏
- React 组件的生命周期
- 在Mac上搭建React Native开发环境(iOS && Android)
- React入门教程(一)——JSX学习篇
- Windows搭建安装React Native环境配置
- Material-UI + React + Babel + Webpack 环境配置
- 从零开始学React(1)——HelloWorld