react-native基础jsonwebblock的博客-

搭建开发环境

需要软件：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 'https://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', });