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 环境，反之亦然，这导致很多人因为繁杂的开发环境而放弃学习或者暂时搁浅。
为了改善这个问题，一个快速的开发环境解决方案应运而生。这个方案需要两个工具：

create-react-native-app ：
这是一款用来创建 ReactNative 项目的脚手架工具。特点是无需配置繁杂的 Android 或 IOS 开发环境，便可进行原生应用的开发，极大简化了环境搭建与配置的过程，很适合学习使用。
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,
}
});

React Native快速入门

相关推荐