React Native快速入门

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性。如果你已经了解了 React，那么还需要掌握一些 React Native 特有的知识，比如原生组件的使用。
ReactNative资料：

• React官网 https://facebook.github.io/react/
• ReactNative官网 https://facebook.github.io/react-native/
• ReactNative中文网 https://reactnative.cn/
  环境搭建：
  学习使用 ReactNative 最令人头疼的就是环境问题，因为大多数 Web 开发者，并不熟悉 Android 与 IOS 的开发环境，配置起来比较繁琐。当然 Android 程序员也不熟悉 IOS 环境，反之亦然，这导致很多人因为繁杂的开发环境而放弃学习或者暂时搁浅。
  为了改善这个问题，一个快速的开发环境解决方案应运而生。这个方案需要两个工具：

1. create-react-native-app ：
   这是一款用来创建 ReactNative 项目的脚手架工具。特点是无需配置繁杂的 Android 或 IOS 开发环境，便可进行原生应用的开发，极大简化了环境搭建与配置的过程，很适合学习使用。
2. Expo：
   这是一款安装在手机上的应用，专门负责运行上述方式构建的 App，这有点像是微信里面运行的小程序。IOS 可以到 AppStore 里面搜索下载，Android 可以到 GooglePlay 里面搜索下载，也可以到 Github 里下载。
   安装：
   create-react-native-app：
   npm install -g create-react-native-app
   创建项目
   create-react-native-app projectName
   
   构建完后结构
   启动项目
   cd projectName
   expo start
   
   Expo：下载安装包，安装到手机上
   手机上打开程序，扫描二维码就能看效果了
   注意：手机与电脑必须在同一个网络中；

内置组件:
-在 React Native 中你需要使用官方提供的组件进行应用构建

• 因为是开发原生应用, 我们的代码最终会转为原生组件的方式渲染, 所以你不会看到任何以 html 标签命名的组件
• [官方文档] https://facebook.github.io/react-native/docs/getting-started
• View组件：
• 视图容器，作用相当于 html 的 div 标签，它是创建UI所需的最基础组件，支持Flexbox布局、样式、触摸事件，它可以放到其它视图中，也可以包含任意多个任意子视图。
• 举例：app.js
• //导入组件
  import React, { Component } from ‘react’;
  //导入页面需要使用到的 native组件
  import { StyleSheet, View, Text} from ‘react-native’;
  //暴露出定义的组件
  export default class App extends Component {
  //渲染标签
  render() {
  return (
  {/* View标签相当于div，可以嵌套 */}
  <View >
  <View>
  <Text>React Native</Text>
  </View>
  <View>
  <Text>使用React编写</Text>
  <Text>使用JSX编写</Text>
  </View>
  </View>
  );
  }
  }
  Text组件：
  文本容器，作用相当于 html 的 span 标签；
  注意：
  1.Text标签支持嵌套、触摸事件。
  2.在RN中，文本必须放置到Text中才可以被渲染，否则报错。
  3.Text采用的是文本布局，多个子文本在渲染时会折叠合并在一起，如果把View理解成块级元素，那么Text就可以理解为行内元素。
  
  4.在RN中，父文本的样式可以传递给后代文本，也就是样式继承。但是除了文本之外其它组件都无法继承样式
  举例：
  app.js
  import React, { Component } from “react”;
  import { StyleSheet, View, Text } from “react-native”;

export default class App extends Component {
render() {
return (
// 可以嵌套
<Text style={style.rootText}> {/嵌套内部的所有Text 都使用 rootText 样式/}
{/* 文本节点是span版本的p标签，行内元素，下面文字会合并在一行 */}
<Text>饿了吗</Text>
<Text>美图</Text>
</Text>
);
}
}
//写样式
//注意:border、background等样式不能简写，必须一个一个的设置属性
let style = StyleSheet.create({
rootText: {
  fontSize: 20,/*注意：样式数字没有单位 */
  color: “blue”,
  lineHeight: 24,
  borderStyle: “dashed”,
  borderWidth: 2,
  borderColor: “red”,
  borderRadius: 2,
}
});