react-native

安装步骤
1.安装依赖
必须安装的依赖有：Node、Python2、JDK 和 Android Studio（ Node 的版本应大于等于 12，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本））
2.cmd安装
nrm 管理npm下载源：npm install nrm -g和nrm ues taobao
react-native-cli native脚手架：npm install react-native-cli-g
3.配置环境变量
ANDROID_HOME---安卓sdk所在的目录
platform-tools 平台工具：
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools;
Java jdk/bin 目录：
C:\Program Files\Java\jdk1.8.0_202\bin
4.初始化项目
npx react-native init myapp
添加安卓依赖包的源地址（阿里）：android/build.gradle
5.连接模拟器（mumu）
先打开mumu模拟器，然后cmd输入adb connect 127.0.0.1:7555
6.运行项目
npx react-native run-android
7.在VSCode里打开该项目
修改APP.js，制作自己想要的页面效果

组件

image.png

Props(属性)

image.png

定义：大多数组件在定义时就可以通过各种自定义参数来实现组件的定制。对外提供的这些参数就称为props（属性）。
以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的prop来指定要显示的图片的地址，以及使用名为style（同css样式style属性）的prop来控制其尺寸。
Android 开发环境
如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请万分仔细地阅读下面的说明，严格对照文档进行配置操作。
安装 Android Studio
首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：
Android SDK
Android SDK Platform
Performance (Intel ® HAXM) (AMD 处理器看这里)
Android Virtual Device

State（状态）
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
一般来说，需要在class中声明一个state对象，然后在需要修改时调用setState方法。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。
每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。
【注意】：
一切界面变化都是状态state变化
state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效

样式书写

image.png

image.png

文本输入框组件
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用

触摸组件（Touchable 系列组件）
这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮
使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
如果想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback
某些场景中可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。

滚动视图
ScrollView是一个通用的可滚动的容器，可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
ScrollView适合于显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染

长列表
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而仅数据不同。
FlatList和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设置好格式的组件来渲染。
例如渲染数据：

image.png