作为一个小白,简单记录下自己的采坑之路，其实写文章的时候一些坑已经踩过去了，很多错误也没及时记录。。我想我这么笨的描述出来的应该都能懂，希望错误的话，大牛及时指正，勿喷！别让我一错到底。。。。哈哈😁

• 简单介绍下react-native
• 搭建 环境时候的错误
• react-navigation （一款react-native导航组件）
• react-native 样式以及常用组件的得坑

什么是 react-native？

这个只是针对对没有用过react 的小伙伴，毕竟这种问题网上一大堆，可是我心想万一哪个幸运的小伙伴看到我的文章，然后又对react 和react-native 一无所知的话，就简单的说说。。。首先rn 就是react-native的缩写，如果有人问你会不会rn，不知道rn是啥的大有人在（原来我就是那个人）淡定不要懵。。。它就是react-native的缩写

• react 只要是前端的 应该都知道是一个前端框架，那么，来了 react-native 是facebook开源的一个框架。据听说 2011年的时候，网页在手机上的那是相当的糟糕😰，facebook 尝试大部分页面使用web技术实现，最后肯定大拇脚趾想就知道over了，但是facebook算是混合应用的先驱者和探索者。
• rn的idea是在2013年的一个极客大会上提出的，2014年7月facebook内部开始尝试使用这项技术，到了2015年3月，rn的ios版本正式开源，到了同年9月，rn的android版本也开源了。
• 俗话说，万事开头难！如果你不会react 可能会难点，如果你会react 那上手就很快了。。。

ReactNative 生命周期

• componentWillMount()
• componentDidMount()
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate（）
• componentDidUpdate（）
• componentWillUnmount（）

搭建开发环境

官方文档 上有步骤，就看着操作就行，但是可能会遇到一些版本的问题之类额各种 错误。。。。这个需要小伙伴自己去采坑的，今天先说说在mac 上开发ios的环境。这个稍微简单点。。。。嘻嘻

• 首先安装依赖，Node、Watchman 和 React Native 命令行工具以及 Xcode。
• 可以安装HomeBrew 来安装 上面所说的依赖。这个可以按照homebrew 官网的步骤去安装，成功之后，直接使用命令行 安装node 和watchman

brew install node
brew install watchman

• Yarn、React Native 的命令行工具（react-native-cli）

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

• 安装React Native CLI: 用来开发React Native的命令行工具
  终端命令：

npm install -g react-native

创建新的项目

你经过千辛万苦 把所有的准备工作都做完之后，接下来就是开始run 起来了

• 首页我们初始化一个新的项目叫做 MyApp，进入你的项目想要放的位置，执行命令

react-native init MyApp

• 开始运行项目

cd MyApp
react-native run-ios

• 出现下面的图就是运行起来了 （哟吼吼。。。）没有出现的话不用急，看错误自己慢慢解决

运行起来.jpeg

• 你会在你app 里面 手机模拟器里面看到 一个MyApp 的app

  
  myapp.jpeg

开始开发

也许经历了 很多错，走到这一步，ღ( ´･ᴗ･` )比心 下面开始开发了

• 我先放出来一个 官方推荐的 学习资源文档列表
• 你会看到代码里面有个App.js ,那么咱们肯定不是只有一个页面 这个时候就会有多个页面来回切换，这样就会用到路由

• 你可以建一个 src 文件夹，里面建几个你要渲染的页面

  
  文件.jpeg
• 然后简单的建一个index.js 充当路由配置的 那么路由该怎么配置呢，这时候就用到了 react-navigation 官方文档

react-navigation 请看下篇文章 好像说了很多废话。。。