React native基础

React native介绍

使用JavaScript和React编写原生移动应用

React Native应用是真正的移动应用，React Native产出的并不是“网页应用”，或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

英文官网：https://reactnative.dev/

中文：https://reactnative.cn/
https://react-native.org.cn/

环境准备

搭建项目框架

expo介绍

http://expo.io

模拟测试环境，增强rn开发的能力，提供组件

使用 Expo CLI

假设已安装 Node.js 10 LTS或更高版本，则可以使用npm安装Expo CLI命令行实用程序：

npm install -g expo-cli
或者
yarn global add expo-cli

然后运行以下命令，创建一个名为“rn-basics”本地项目：

expo init rn-basicscd rn-basics
npm start # 也可以使用命令: expo start

此时会启动一个开发服务器。

运行 React Native 应用程序

在iOS或Android手机上安装[Expo](https://docs.expo.io/versions/v36.0.0/get-started/installation/ Expo)客户端应用程序，并连接到与计算机相同的无线网络（Wifi热点）。在Android上，使用Expo应用程序从终端扫描二维码以打开项目。在iOS上，按照屏幕上的说明（一般为使用相机扫描）获取链接。

修改你的程序

现在你已经成功运行了应用程序，让我们修改一下代码试试。在文本编辑器中打开 App.js 并编辑一些行。保存更改后，应用程序会自动重新加载。

基础知识

React Native 与 React类似，但它使用原生(native)组件而不是基于浏览器(web)组件作为构建块。因此，要了解 React Ntive 应用程序的基本结构，您需要了解一些基本的 React 概念，如JSX、组件、状态和属性。如果你已经了解 React，那么你仍然需要学习一些 React Native 特定的东西，比如原生(Native) 组件。本教程面向所有人群，无论你是否有 React 经验。

Hello World

编程界的老习惯，先来个 Hello World 尝尝鲜：

import React, { Component } from 'react';
import { Text, View } from 'react-native';export default class HelloWorldApp extends Component {render() {return (<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Hello, world!</Text></View>);}
}

如果你感到好奇，这不就是React程序吗？是的，可以直接在web模拟器中运行这段代码。也可以将其粘贴到App.js文件中，以便在本地计算机上创建真正的原生应用程序。

奇葩的语法

这里的一些内容看来可能不像 JavaScript。别慌。这就是未来。

首先，ES2015（也称为ES6）是对JavaScript的一系列改进，ECMAScript 现在是官方标准的一部分，但还没有得到所有浏览器的支持。React Native ships 支持 ES2015，因此你可以使用这些内容而不必担心兼容性。上述示例中的import、from、class 和 extends 都是ES2015的特性。如果你不熟悉ES2015，你也可以通过阅读本教程中的示例代码来了解它。

在这个代码示例中，另一个不寻常的事情是<View><Text>Hello world！</Text></View>。这是JSX——一种在JavaScript中嵌入XML的语法。许多框架使用一种专门的模板语言，允许您在标记语言中嵌入代码。在React中，没有使用模板。JSX允许您在代码中编写标记语言。它看起来像web上的HTML，但这里使用的是React组件，而不是像<div> 或 <span>这样的 HTML 标签。在本例中，是一个内置组件，它显示一些文本，类似于 <div>或 <span>。

组件

这段代码定义了HelloWorldApp，这是一个新组件。当你在构建一个 React 本地应用程序时，你将大量地生成新组件。你在屏幕上看到的任何东西都是某种组件。

WebView组件

WebView 创建一个原生的 WebView，可以用于访问一个网页。相当于iframe

import { WebView } from "react-native-webview"

Props

大多数组件在创建时都可以使用不同的参数进行自定义。这些创建参数称为props，是properties的缩写。
例如，一个基本的React Native 组件 Image。创建图像时，可以使用名为source的属性来控制它显示的图像。

import React, { Component } from 'react'
import { Image } from 'react-native'export default class Bananas extends Component {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中。您可以将任何JavaScript表达式放在JSX中的大括号中。
你自己的组件也可以使用 props。这允许你创建一个在应用程序中的许多不同位置使用的组件，每个组件的属性可以略有不同，获取值可以在渲染函数中引用This.props。下面是一个例子：

import React, { Component } from 'react';
import { Text, View } from 'react-native';class Greeting extends Component {render() {return (<View style={{alignItems: 'center'}}><Text>Hello {this.props.name}!</Text></View>);}
}export default class LotsOfGreetings extends Component {render() {return (<View style={{alignItems: 'center', top: 50}}><Greeting name='张三' /><Greeting name='李四' /><Greeting name='王五' /></View>);}
}

我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在 JSX 语句中，用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架，那就放手做吧！

上面的例子出现了一个新的名为 View 的组件。View 常用作其他组件的容器，来帮助控制布局和样式。

仅仅使用 props 和基础的Text、Image 以及 View组件，你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面，那就需要进一步学习 State（状态）的概念。

State

我们使用两种数据来控制一个组件：props 和 state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

一般来说，你需要在class中声明一个state对象，然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

import React, { Component } from 'react';
import { Text, View } from 'react-native';class Blink extends Component {// 声明state对象state = { isShowingText: true };componentDidMount() {// 每1000毫秒对showText状态做一次取反操作setInterval(() => {this.setState({isShowingText: !this.state.isShowingText});}, 1000);}render() {// 根据当前showText的值决定是否显示text内容if (!this.state.isShowingText) {return null;}return (<Text>{this.props.text}</Text>);}
}export default class BlinkApp extends Component {render() {return (<View><Blink text='I love to blink' /><Blink text='Yes blinking is so great' /><Blink text='Why did they ever take this out of HTML' /><Blink text='Look at me look at me look at me' /></View>);}
}

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。

每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。

State 的工作原理和 React.js 完全一致，所以对于处理 state 的一些更深入的细节，你可以参阅React.Component API。

提示一些初学者应该牢记的要点：
一切界面变化都是状态state变化
state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效

处理文本输入

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

假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词：