对react-native的研究

  React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> 如果你喜欢在Web上使用React，那你也肯定会喜欢React Native. </Text> <Text> 基本上就是用原生组件比如'View'和'Text' 来代替web组件'div'和'span'。 </Text> </View> ); } }

React Native应用是真正的移动应用

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

import React, { Component } from 'react'; import { Image, ScrollView, Text } from 'react-native'; class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} style={{ 320, height:180}} /> <Text> 在iOS上，React Native的ScrollView组件封装的是原生的UIScrollView。 在Android上，封装的则是原生的ScrollView。 在iOS上，React Native的Image组件封装的是原生的UIImageView。 在Android上，封装的则是原生的ImageView。 React Native封装了这些基础的原生组件，使你在得到媲美原生应用性能的同时，还能受益于React优雅的架构设计。 </Text> </ScrollView> ); } }

可随时呼叫原生外援

React Native完美兼容使用Objective-C、Java或是Swift编写的组件。 如果你需要针对应用的某一部分特别优化，中途换用原生代码编写也很容易。 想要应用的一部分用原生，一部分用React Native也完全没问题 —— Facebook的应用就是这么做的。

import React, { Component } from 'react'; import { Text, View } from 'react-native'; import { TheGreatestComponentInTheWorld } from './your-native-code'; class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> 上面这个TheGreatestComponentInTheWorld组件完全可以使用原生Objective-C、 Java或是Swift来编写 - 开发流程并无二致。 </Text> </View> ); } }

搭建

  

安装依赖

必须安装的依赖有：Node、Watchman、Xcode和CocoaPods。

创建新项目

         如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：

必须要看的注意事项一：0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译，请务必使用稳定的代理软件。

必须要看的注意事项二：0.60 及以上版本依赖 CocoaPods 安装。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的安装步骤卡很久，可以试一下这个国内镜像

必须要看的注意事项三：请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。请不要在目录、文件名中使用中文、空格等特殊符号。

cd AwesomeProject yarn ios # 或者 yarn react-native run-ios

核心组件与原生组件

React Native是一个开放源代码框架，用于使用React和应用程序平台的本机功能构建Android和iOS应用程序。使用React Native，您可以使用JavaScript来访问平台的API，并使用React组件（可重用，可嵌套的代码包）来描述UI的外观和行为。您可以在下一部分中了解有关React的更多信息。但是首先，让我们介绍一下组件在React Native中的工作方式。

视图和移动开发

在Android和iOS开发中，视图是UI的基本组成部分：屏幕上的一个小矩形元素，可用于显示文本，图像或响应用户输入。甚至应用程序的最小视觉元素（如一行文本或一个按钮）也属于各种视图。某些类型的视图可以包含其他视图。一路向下看！

本机组件

在Android开发中，您可以使用Kotlin或Java编写视图；在iOS开发中，您使用Swift或Objective-C。使用React Native，您可以使用React组件通过JavaScript调用这些视图。在运行时，React Native为这些组件创建相应的Android和iOS视图。由于React Native组件具有与Android和iOS相同的视图支持，因此React Native应用的外观，感觉和性能与其他任何应用一样。我们将这些平台支持的组件称为“本机组件”。

React Native允许您为Android和iOS构建自己的Native Components，以满足您应用程序的独特需求。我们还有一个由社区贡献的组成部分的繁荣生态系统。查看本机目录以查找社区正在创建的内容。

React Native还包括一组基本的，随时可用的Native组件，您可以使用它们立即开始构建您的应用程序。这些是React Native的核心组件。

核心组件

React Native具有许多核心组件，从表单控件到活动指示器，应有尽有。您可以在API部分找到所有记录的文档。您将主要使用以下核心组件：

REACT NATIVE UI组件	ANDROID视图	IOS视图	网络模拟	描述
<View>	<ViewGroup>	<UIView>	非滚动 <div>	一个支持Flexbox，样式，一些触摸处理和辅助功能控件布局的容器
<Text>	<TextView>	<UITextView>	<p>	显示，设置样式和嵌套文本字符串，甚至处理触摸事件
<Image>	<ImageView>	<UIImageView>	<img>	显示不同类型的图像
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	通用滚动容器，可以包含多个组件和视图
<TextInput>	<EditText>	<UITextField>	<input type="text">	允许用户输入文字

REACT NATIVE UI组件	ANDROID视图	IOS视图	网络模拟	描述
<View>	<ViewGroup>	<UIView>	非滚动 <div>	一个支持Flexbox，样式，一些触摸处理和辅助功能控件布局的容器
<Text>	<TextView>	<UITextView>	<p>	显示，设置样式和嵌套文本字符串，甚至处理触摸事件
<Image>	<ImageView>	<UIImageView>	<img>	显示不同类型的图像
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	通用滚动容器，可以包含多个组件和视图
<TextInput>	<EditText>	<UITextField>	<input type="text">	允许用户输入文字

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={{ 200, height: 200}}/>
</View>
<TextInput
style={{
height: 40,
borderColor: 'gray',
borderWidth: 1
}}
defaultValue="You can type in me"
/>
</ScrollView>
);
}

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>
);
}
}

那这段代码是什么意思呢？

初看这段代码，可能觉得并不像 JavaScript——没错，这是“未来”的 JavaScript.

首先你需要了解 ES2015 （也叫作 ES6）——这是一套对 JavaScript 的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言 web 开发中还很少使用。React Native 内置了对 ES2015 标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是 ES2015 中的特性。如果你不熟悉 ES2015 的话，可以看看阮一峰老师的书。

示例中的这一行<View><Text>Hello world!</Text></View>恐怕很多人看起来也觉得陌生。这叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React 反其道而行之，设计的 JSX 语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像 web 上的 HTML，只不过使用的并不是 web 上常见的标签如<div>或是<span>等，这里我们使用的是 React Native 的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本，而<View>就类似 html 中的div或是span这样的容器。

组件

上面的代码定义了一个名为HelloWorldApp的新的组件（Component）。你在编写 React Native 应用时，肯定会写出很多新的组件。而一个 App 的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的 JSX 语句。

Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

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={{ 193, height: 110}} />
);
}
}

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变化
• state的修改必须通过setState()方法
  • this.state.likes = 100; // 这样的直接赋值修改无效！
  • setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
  • setState 是异步操作，修改不会马上生效