react-native基础
搭建开发环境
需要软件：androidstudio | mumu模拟器 | nodeJS | jdk
安装完node后建议设置npm镜像（淘宝源）以加速后面的过程。
npm install nrm -g
//安装nrm便于管理npm下载源
npx nrm use taobao
//使用nrm工具切换淘宝源
npx nrm use npm
//如果之后需要切换回官方源可使用
npm install react-native-cli -g
//安装native脚手架配置ANDEOID_HOME环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录
配置工具环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后platform-tools工具目录路径添加进去
Java环境吧jdk文件的bin目录如platform-tools一样配置好
初始化项目
npx react-native init myapp添加安卓依赖包的源地址（阿里）：
allprojects {
repositories {
mavenLocal()
maven {
url 'http://maven.aliyun.com/nexus/content/groups/public' }
....
}链接模拟器
先打开模拟器，
然后打开cmd面板切换到myapp项目输入：
adb connect 127.0.0.1:7555本次以mumu模拟器为例
注：
夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555
运行项目：
npx react-native run-android
用编辑器打开项目
修改app.js根组件，开发自己的项目
核心组件与原生组件
使用方法代码示例：
import React from 'react';
import {
View, Text, Image, ScrollView, TextInput } from 'react-native';
export default function App() {
return (
<ScrollView>
<Text>Some text</Text>
<View>
<Text>Some more text</Text>
<Image source="https://facebook.github.ioassets/p_cat2.png" style={
{
width: 200, height: 200}}/>
</View>
<TextInput
style={
{
height: 40,
borderColor: 'gray',
borderWidth: 1
}}
defaultValue="You can type in me"
/>
</ScrollView>
);
}JSX语法
反应和应对本地使用JSX语法，可以让你写的元素中的JavaScript像这样：
<Text>Hello, I am your cat!</Text>。props(属性)
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={
pic} style={
{
width: 193, height: 110}} />
);
}请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。
state（状态）
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
一般来说，你需要在class中声明一个state对象，然后在需要修改时调用setState方法
每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。
注：一些初学者应该牢记的要点：
- 一切界面变化都是状态state变化
- state的修改必须通过**setState()**方法
- this.state.likes=100;//这样的直接赋值修改无效
- setState是一个merge合并操作，只修改指定属性，不影响其他属性
- setState是异步操作，修改不会马上生效
处理文本输入
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。
文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证，在React 中的受限组件一节中有一些详细的示例（注意 react 中的 onChange 对应的是 rn 中的 onChangeText）
处理触摸事件
当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或者在一个地图上缩放。ReactNative提供了可以处理常见触摸手势（例如点击或滑动）的组件，以及可用于识别更复杂的手势的完整的手势响应系统。
简单实例
<Button
onPress={
() => {
Alert.alert("你点击了按钮！");
}}
title="点我！"
/>点击这个按钮会调用“ onPress”函数，具体作用就是显示一个警报弹出框。
可触摸系列组件：
- 一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
- 在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
- TouchableOpacity会在用户手指按下时降低按钮的长度，而不会改变背景的颜色。
- 如果您想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。
使用滚动视图
ScrollView是一个通用的可滚动的容器，您可以在其中加入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView可以可以垂直滚动，可以水平滚动（通过horizontal属性来设置）。
可以将ScrollViews配置为允许使用pagingEnabled道具通过滑动手势在视图之间进行分页。在视图之间水平滑动也可以使用ViewPager组件在Android上实现。
在iOS上，带有单个项目的ScrollView可用于允许用户缩放内容。设置maximumZoomScale和minimumZoomScale道具，您的用户将可以使用捏合和展开手势来放大和缩小。
ScrollView适合于显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染。
使用长列表
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而仅数据不同。
FlatList和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设置好格式的组件来渲染。
网络
发起请求
fetch('https://mywebsite.com/mydata.json');获取另外可选的第二个参数，可以使用定制的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',
}),
});提交数据的格式必须由标头中性Content-Type。Content-Type有很多种，对应正文的格式也有区别。到底应该采用什么样的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',
});