介绍
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
RN环境搭建:
1.配置RN基本开发环境
这两篇文档对比着进行参考，进行相关的安装；
2.创建项目
终端指令
react-native init AwesomeProject
3.编译并运行 React Native 应用
终端指令
cd AwesomeProject
react-native run-ios
4. 热加载
通过⌘-R可以刷新 APP 并看到你的最新修改！如果没有反应，请检查模拟器的 Hardware 菜单中，connect hardware keyboard 选项是否选中开启）
RN初识-Hello,world
import React, { Component } from 'react';
import { Text, View } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text> hello,world! </Text>
</View>
)
}
}
import、from、class、extends、以及() =>箭头函数等新语法都是 ES2015 中的特性。可以看看阮一峰老师的书，了解语法特性。
<View><Text>Hello world!</Text></View>这叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法.
View可以看做是的UIView, Text可以当做是 Label
核心概念
1. Component 组件
组件允许你将 UI 拆分为独立可复用的代码片段, 组件作为RN的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是RN应用程序的基石。
hello,world实例代码定义了一个名为App的新的组件（Component）。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。
2. Props（属性）
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
props 就是父控件传入进来得参数集合,通过 props 可以展示父控件传进来得数据
// props 使用
import React, { Component } from 'react'
import { Text, View } from 'react-native'
// 组件一
class Welcome extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
{/* 通过 this.props.msg 获取外部传入的数据*/}
<Text> {this.props.msg} </Text>
</View>
)
}
}
// 组件二
export default class App extends Component {
render() {
return (
<View style = {{alignItems: 'center', marginTop: 50}}>
{/* 给 Welcome组件传入数据*/}
<Welcome msg = 'hello,world'></Welcome>
</View>
)
}
}
3. State（状态）
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
state 需要在构造器(constructor)中进行初始化, state 只能在自己组件内使用,可以通过setState方法修改state的值.
state 可以理解为自己组件内的私有属性集合,只能自己使用修改,外部无法访问
//state (状态)
import React, { Component } from 'react'
import { Text, View } from 'react-native'
// 定义一个时钟组件
export default class Clock extends Component {
constructor(props) {
super(props)
// state内部存储一个 date 属性,只能在组件内访问和使用
this.state = {
date: new Date()
}
}
// 开启一个定时器,1秒执行一次
componentDidMount() {
this.timeId = setInterval(() => this.tick(), 1000)
}
// 每一秒修改state 的 date 的值
tick() {
this.setState({
date: new Date()
})
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}>
{/* 展示 state状态 date 属性的值 */}
<Text> time: {this.state.date.toLocaleTimeString()} </Text>
</View>
)
}
}
4. 样式
在React Native中,所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor
style属性可以是一个普通的JavaScript对象。这是最简单的用法
import React from 'react'
import { Text, View } from 'react-native'
export default class App extends React.Component {
render() {
return (
<View style = {{backgroundColor: 'blue', height: '100%'}}>
<Text style = {{ color: 'red',fontWeight: 'bold', fontSize: 30,}}>hello,world</Text>
</View>
)
}
}
实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
5.高度与宽度
组件的高度和宽度决定了其在屏幕上显示的尺寸。
5.1 指定宽高
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
RN组件在界面上布局方式,默认是自上而下来进行布局的
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style = {{top: 100}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
运行效果:
5.2 弹性（Flex）宽高
在组件样式中使用 flex可以使其在可利用的空间中动态地扩张或收缩。 一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
import React, { Component } from 'react';
import {View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
};
注: 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
6. Flexbox布局
React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。
一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求
Flex 布局语法
6.1 Flex Direction
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。
import React, { Component } from 'react';
import { View } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'gray' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'yellow' }}></View>
</View>
)
}
}
效果
6.2 Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。
import React, { Component } from 'react';
import { View } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }}></View>
</View>
)
}
}
效果:
6.3 Align Items
在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
import React, { Component } from 'react';
import { View } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems:'center'
}}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }}></View>
</View>
)
}
}
效果:
7. 处理文本输入
import React, { Component } from 'react'
import { Text, View, TextInput } from 'react-native'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
text: ''
}
}
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<TextInput
style={{ height: 40, width: 200, borderWidth: 1, borderColor: 'gray', borderStyle: 'solid', borderRadius: 5 }}
placeholder="请输入文字"
onChangeText={(text) => { this.setState({ text }) }}
/>
<Text style = {{marginTop: 50}}>{this.state.text}</Text>
</View>
)
}
}
效果:
8. 处理触摸事件
移动应用上的用户交互基本靠“触摸”。当然，“触摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。
8.1 显示一个简单的按钮
import React, { Component } from 'react'
import { View, Button, Alert } from 'react-native'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
text: ''
}
}
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Button title="点击我"
onPress={() => {
Alert.alert('我被点击了.')
}}
/>
</View>
)
}
}
效果:
9.使用滚动视图
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
import React, { Component } from 'react';
import { View, ScrollView,Text } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={{ flex: 1}}>
<ScrollView style={{ flex: 1, width: '100%'}}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }}></View>
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }}></View>
<Text style = {{fontSize: 100}}>hello,world</Text>
<Text style = {{fontSize: 100}}>hello,world</Text>
<Text style = {{fontSize: 100}}>hello,world</Text>
<Text style = {{fontSize: 100}}>hello,world</Text>
<Text style = {{fontSize: 100}}>hello,world</Text>
<Text style = {{fontSize: 100}}>hello,world</Text>
</ScrollView>
</View>
)
}
}
效果:
10.使用长列表
React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList
10.1 FlatList
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
import React, { Component } from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<FlatList data={[
{ key: 'Devin' },
{ key: 'Jackson' },
{ key: 'James' },
{ key: 'Joel' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Jimmy' },
{ key: 'Julie' },
]}
renderItem={({ item }) => { return <Text style={styles.itemStyle}>{item.key} </Text> }}
>
</FlatList>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 64
},
itemStyle: {
marginBottom: 1,
fontSize: 30,
height: 44,
backgroundColor: 'red'
}
})
效果:
10.2 SectionList
渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择
import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{ title: 'D', data: ['Devin'] },
{ title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'] },
]}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})
效果:
11.网络
使用 Fetch
React Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API，那么 Fetch 用起来将会相当容易上手。这篇文档只会列出 Fetch 的基本用法，并不会讲述太多细节，你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多
信息。
发起请求
要从任意地址获取内容的话，只需简单地将网址作为参数传递给 fetch 方法即可（fetch 这个词本身也就是获取的意思）：
fetch('https://mywebsite.com/mydata.json');
Fetch 还有可选的第二个参数，可以用来定制 HTTP 请求一些参数。你可以指定 header 参数，或是指定使用 POST 方法，又或是提交数据等等：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
提交数据的格式关键取决于 headers 中的Content-Type。Content-Type有很多种，对应 body 的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json'，还有传统的网页表单形式，示例如下：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2',
});
处理服务器的响应数据
上面的例子演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据
网络请求天然是一种异步操作,Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码（译注：同样的，如果你不了解 promise，建议使用搜索引擎补课）：
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
默认情况下，iOS 会阻止所有 http 的请求，以督促开发者使用 https。如果你仍然需要使用 http 协议，那么首先需要添加一个 App Transport Security 的例外，详细可参考这篇帖子。
从 Android9 开始，也会默认阻止 http 请求，请参考相关配置
使用其他的网络库
eact Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用 jQuery，因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西（所以也不是所有 web 中的 ajax 库都可以直接使用）
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。
WebSocket 支持
React Native 还支持WebSocket，这种协议可以在单个 TCP 连接上提供全双工的通信信道。
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
以上就是RN的入门指南了,如果需要了解更多组件以及使用,请参考:
