Sponsered by
与现有的应用程序集成
由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的用 V 来表示——这很容易嵌入到现有 non-React Native 应用程序中。事实上，它与另外的最佳实践社区工具集成了，如 。
- gem install cocoapods
- brew install node
用 CocoaPods 安装 React Native
是 iOS/Mac 开发的管理工具包。我们需要用它来下载 React Native。如果你还没有安装 CocoaPods，请查看。
当你准备使用 CocoaPods 工作时，添加以下行到 Podfile 中。如果你没有，那么在你的项目的根目录下创建它。
pod 'React'
pod 'React/RCTText'
# Add any subspecs you want to use in your project
记得安装所有你需要的 subspecs。没有 pod 'React/RCTText'，&Text& 元素不能使用。
然后安装你的 pods：
$ pod install
创建你的 React Native 应用程序
有两块你需要设置：
根 JavaScript 文件，该文件将包含实际的 React Native 应用程序和其他组件
包装 Objective - C 代码，将加载脚本并创建一个 RCTRootView 来显示和管理你的 React Native 组件
首先，为你的应用程序的 React 代码创建一个目录，并创建一个简单的 index.ios.js 文件：
$ mkdir ReactComponent
$ touch index.ios.js
为 index.ios.js 复制 & 粘贴以下 starter 代码——它是一个 barebones React Native 应用程序：
'use strict';
var React = require('react-native');
var styles = React.StyleSheet.create({
container: {
backgroundColor: 'red'
class SimpleApp ponent {
render() {
&View style={styles.container}&
&Text&This is a simple application.&/Text&
React.AppRegistry.registerComponent('SimpleApp', () =& SimpleApp);
SimpleApp 将是你的模块名称，这将在后面使用。
将容器视图添加到你的应用程序中
现在，你应该为 React Native 组件添加一个容器视图。在你的应用程序中它可以是任何的 UIView。
但是，为了使代码简洁，让我们把 UIView 归入子类。让我们把它命名为 ReactView。打开你的 Yourproject.xcworkspace，并创建一个新类 ReactView(你可以把它命名为任何你喜欢的名字：))。
// ReactView.h
#import &UIKit/UIKit.h&
@interface ReactView : UIView
在一个视图控制器中，想要管理这一视图，继续添加一个出口并将其连接：
// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactV
在这里我简单的禁用了 AutoLayout。在实际产品中，你应该自己打开 AutoLayout，并且设置约束。
为容器视图添加 RCTRootView
准备好学习最有趣的这部分了吗？现在我们将在你的 React Native 应用程序存在的位置创建 RCTRootView。
在 ReactView.m 中，我们首先需要用 index.ios.bundle 的 URI 启动 RCTRootView。index.ios.bundle 将被 packager 创建，并由 React Native 服务器服务，这将在稍后讨论。
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// To generate that file, run the curl command and add the output to your main Xcode build target:
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName: @"SimpleApp"
launchOptions:nil];
然后把它作为 ReactView 的子视图添加。
[self addSubview:rootView];
rootView.frame = self.
启动开发服务器
在根目录，我们需要启动 React Native 开发服务器。
(JS_DIR=`pwd`/ReactC cd Pods/R npm run start -- --root $JS_DIR)
这个命令将在我们的 CocoaPods 依赖中启动一个 React Native 开发服务器，来创建捆绑脚本。——root 选项表明 React Native 应用程序的根——这将是我们包含单一 index.ios.js 文件的
ReactComponents目录。该运行的服务器将通过 http:/ / localhost:8081 / index.ios.bundle 把 index.ios.bundle 打包成可访问的文件。
编译和运行
现在编译并运行你的应用程序。你将看到你的 React Native 应用程序在 ReactView 内部运行。
Live 也从模拟器重新加载工作！你已经得到了一个简单的完全封装在 Objective–C UIView 子类中的 React 组件。
所以，当 RCTRootView 初始化时，它会尝试从 React Native 开发服务器中下载，解析并运行包文件。这意味着你所需要做的就是为 RCTRootView 实现你自己的容器视图或视图控制器——RCTRootView 摄取了捆绑的 JS 并呈现出你的 React 组件。万岁!
你可以在查看一个示例应用程序的完整源代码。我们书接上文《》，继续来讲如何用 React Native 创建一个iOS APP。接下来，我们会涉及到很多控件。
AppRegistry.registerComponent(
上述是定义应用程序的入口点。这也是 JavaScript 代码开始执行的地方。
这是一个本地用户界面反应的基本结构。我们定义的每个视图将遵循相同的基本结构。
在本教程中，我们将创建一个既可以浏览书籍又能知道书籍介绍比如作者、标题或关于书籍的简介。你还可以通过检索书名或作者来查找你想要的书籍。下面我要介绍这个应用程序。我们将会使用谷歌图书 API的数据。
添加一个标签栏
该应用程序会有一个有两项的标签栏--- Featured 和 Search。我们将首先添加它。
虽然你拥有 index.ios.js 文件中所有的代码，这是不推荐的，因为它会随着应用程序的代码的增加而混乱。为了更好的管理，我们要在不同的文件中创建类别。
创建两个 JavaScript 文件在你项目的根目录（和 index.ios.js 文件在相同的位置）。为 Search.js 文件和 Featured.js 命名。打开 Featured.js 并添加以下代码。
'use strict';
var React = require('react-native');
StyleSheet,
var styles = StyleSheet.create({
description: {
fontSize: 20,
backgroundColor: 'white'
container: {
justifyContent: 'center',
alignItems: 'center'
class Featured extends Component {
render() {
&View style={styles.container}&
&Text style={styles.description}&
Featured Tab
module.exports = F
你应该熟悉以上那个代码；它非常类似于我们之前看到的代码。我们设置 Strict Mode，加载 react-native
模块，创建视图样式，渲染UI 和渲染输出()函数功能。最后一行代码输出 Featured 类从而使他更方便地被其他文件所用。请注意我们所说的 class 和 function有点不同于 index.ios.js。JavaScript 有不同的方式表示 class和 function。可以随意选择你喜欢的你风格。接下来的教材中，我们将使用上边所使用的风格。
通过样式表中的定义，我们可以看出基本的 CSS 属性。我们为视图中的文本和中心内容设置字体大小和背景颜色。但你可能不熟悉 flex:1样式。这是 flexbox，CSS 规范的最新附加功能。flex:1 使元素标记容器占用的空间在屏幕上不被兄弟元素占用，否则它只能通过占用足够的空间来适应它的内容。以后我们将更加重视 flex。了解更多的Flexbox 样式，你可以阅读本指南。
在 Search.js 添加以下程序。
'use strict';
var React = require('react-native');
StyleSheet,
var styles = StyleSheet.create({
description: {
fontSize: 20,
backgroundColor: 'white'
container: {
justifyContent: 'center',
alignItems: 'center'
class Search extends Component {
render() {
&View style={styles.container}&
&Text style={styles.description}&
Search Tab
module.exports = S
上述程序除了文本组件中的文本都类似于 Featured.js 代码。
在 index.ios.js 中剪切所有并粘贴在下边。
'use strict';
var React = require('react-native');
var Featured = require('./Featured');
var Search = require('./Search');
AppRegistry,
TabBarIOS,
class BookSearch extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'featured'
render() {
&TabBarIOS selectedTab={this.state.selectedTab}&
&TabBarIOS.Item
selected={this.state.selectedTab === 'featured'}
icon={{uri:'featured'}}
onPress={() =& {
this.setState({
selectedTab: 'featured'
&Featured/&
&/TabBarIOS.Item&
&TabBarIOS.Item
selected={this.state.selectedTab === 'search'}
icon={{uri:'search'}}
onPress={() =& {
this.setState({
selectedTab: 'search'
&/TabBarIOS.Item&
&/TabBarIOS&
AppRegistry.registerComponent('BookSearch', () =& BookSearch);
这时我们需要从我们创建的文件中导出两个模块，并将他们分配给变量。在 class 内部，我们指定一个构造函数来为 class 设置一个状态。这时我们要用组件的状态函数。创建一个名为 selectedTab 的属性，并将其值设置为 featured。我们将使用 featured 来确定哪个选项卡应该是主动的。然后设置默认选项卡。
在渲染()函数中我们使用 TabBarIOS 组件创建一个标签栏。记得添加组件使用解构作业否则使用完全限定名称，例如：React.TabBarIOS。
我们创建两个标签栏项目。我们为每个项目设立选中状态并定义一个函数，当这个项目被选中时就会被命名。在 Featured 选项卡中，选择设置为 true，如果 selectTab 状态我们前边定义的值为 feature，组件 selectedTab 是否等同于「搜索」。无论哪个选项卡被设置为 true 都将是活动选项卡。我们为标签栏项目使用系统图标。
注意我们使用我们的自定义组件标签，就像任何其他组件，例如：因为我们需要相应的模块，并将其分配到一个变量，你可以使用变量引入组件文件。这导致在 render() 函数的代码组件的类包含就像是文件的一部分。顺便说一下，我为各自变量的类名使用相同名称的变量，但不一定要这样，你可以尽可能的使用你喜欢的任何名称。
当标签栏被选中后，onPress 组件的属性就会被回调函数定义。selectedTab 属性的函数集值最终确定活动选项卡。
打开模拟器并按 Command-R 重新加载应用程序，你就会看到如下显示。
添加 Navigation
接下来，我们将向应用程序添加一个导航栏，给这个项目添加两个以上的文件。他们将是根视图导航堆栈的标签。为 BookList.js 和SearchBooks.js 文件命名。
在 BookList.js 应用程序中添加以下代码。
'use strict';
var React = require('react-native');
StyleSheet,
var styles = StyleSheet.create({
class BookList extends Component {
render() {
module.exports = BookL
在 SearchBooks.js 应用程序中添加以下代码。
'use strict';
var React = require('react-native');
StyleSheet,
var styles = StyleSheet.create({
class SearchBooks extends Component {
render() {
module.exports = SearchB
在两个文件中，我们已经创建了一个带有空白视图的模块然后输出模块。
修改 Featured.js 如图：
'use strict';
var React = require('react-native');
var BookList = require('./BookList');
StyleSheet,
NavigatorIOS,
var styles = StyleSheet.create({
container: {
class Featured extends Component {
render() {
&NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Featured Books',
component: BookList
module.exports = F
下一个 Search,js 修改如下所示:
'use strict';
var React = require('react-native');
var SearchBooks = require('./SearchBooks');
StyleSheet,
NavigatorIOS,
var styles = StyleSheet.create({
container: {
class Search extends Component {
render() {
&NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Search Books',
component: SearchBooks
module.exports = S
就像在 Featured.js，上面创建了一个导航控制器，设置其最初的路线并为它设置标题。
重新加载应用程序，你会看到如下所示：
获取和显示数据
现在我们要读取数据了。首先我们要构建有假数据的视图，然后使用来自 API 的真数据。
在 BookList.js 文件的顶部添加如下与其他变量的声明。
var FAKE_BOOK_DATA = [
{volumeInfo: {title: 'The Catcher in the Rye', authors: &J. D. Salinger&, imageLinks: {thumbnail:
'/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'}}}
修改解构任务直到显示包含多个组件时我们才能使用。
StyleSheet,
Component,
添加以下模版：
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
thumbnail: {
width: 53,
height: 81,
marginRight: 10
rightContainer: {
fontSize: 20,
marginBottom: 8
color: '#;
然后修改如图所示的 class：
class BookList extends Component {
render() {
var book = FAKE_BOOK_DATA[0];
&View style={styles.container}&
&Image source={{uri: book.volumeInfo.imageLinks.thumbnail}}
style={styles.thumbnail} /&
&View style={styles.rightContainer}&
&Text style={styles.title}&{book.volumeInfo.title}&/Text&
&Text style={styles.author}&{book.volumeInfo.authors}&/Text&
重新加载应用程序就会有如下显示：
在以上代码中，我们创建了一个类似于从 API 中调用的目标 JSON，我们通过这个目标为单独的一本书创建了属性和价值。在 class 文件中，我们使用假数据只为了得到第一个元素来填充我们的观点。我们使用图像组件把图像加载成视图。需要注意的是，我们要在样式表中设置它的宽度和高度。如果你不指定图像在样式表中的尺寸，它就不会出现在视图中。
我们指定一个 flexDirection 样式：“行”容器。这将使带有这种风格元素的孩子们的布局默认为水平而不是垂直。需要注意的是我们该如何包装组件内的其他组件。在上面有带有两个孩子的主要容器物----一个图像和一个视图。这个视图能显示两个属于自己的孩子----即两个文本组件。
首先是图像布局，然后视图（right Container)水平放置在它旁边。我们指定一个 flex 模版：1rightContainer。这使得视图占据了剩下的空间而不是图像。如果你想要看到 flex 样式的影响，那就添加以下 rightContainer。
backgroundColor: 'red'
重新加载应用程序，你就会看到 rightContainer 样式的组件占用的空间。它占据整个空间而不被其他兄弟姐妹所占有。它并不拉伸屏幕，因为外容器有一些填充并且图像有边缘设置权利。
从 rightContainer 删除 flex：1，重新加载应用程序。现在组件只占用足够的可以适应其内容的空间。
如果你为 flex:2 的缩略图和 rightContainer 设置一种风格，他们可能占据相同数量的空间，而且他们会有一个 2:2（或1:1）的宽度比。你可以指定任何值，所有可能的比例都会考虑在内。
你也可以尝试不同的比率得到你喜欢的样式。对于本教程，我们将从为rightContainer 添加一个红色的背景这一步继续深入。
以真实用户体验为度量标准进行 ，监控网络请求及网络错误，提升用户留存。访问 感受更多应用性能优化体验，想阅读更多技术文章，请访问 。
这是本地app 还是用js 做的webapp
我傻傻分不清楚尊重版权,未经授权不得转载
本文来自:江清清的技术专栏()
今天我们继续来看一下AppStateIOS模块检测iOS App应用的运行状态模块详细介绍以及使用实例。
刚创建的React Native技术交流3群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
AppStateIOS模块可以让我们知道当前应用是在前台还是在后台运行，并且当App运行状态发生变化的时候进行通知你。当前模块只是适配于iOS平台，如果需要检测Android平台的应用运行状态，可以点击下面的地址进行查看:
(二)iOS App 状态介绍
2.1.active
当前app应用运行在前台
2.2.background
当前app应用运行在后台。此刻用户可能在运行另外一个app或者用户在手机主界面
2.3.inactive
该状态为app应用运行的过渡状态，不过该状态暂时在React Native应用中不会出现。
如果需要查看更加详细的信息，可以点击
(三)模块基本用法
当前可以通过AppStateIOS.currentState进行检测当前应用的运行状态。该值会随时应用运行不断的更新实时状态信息。不过当应用进行启动的时候该currentState的值可能为空，一直直到AppStateIOS通过桥接获取到原生的状态通知为止。下面来看一下官方文档给的实例代码:
getInitialState: function() {
currentAppState: AppStateIOS.currentState,
componentDidMount: function() {
AppStateIOS.addEventListener('change', this._handleAppStateChange);
componentWillUnmount: function() {
AppStateIOS.removeEventListener('change', this._handleAppStateChange);
_handleAppStateChange: function(currentAppState) {
this.setState({ currentAppState, });
render: function() {
&Text&Current state is: {this.state.currentAppState}&/Text&
以上实例应该只会显示"Current state is:active"的信息。在应用在active状态的时候，用户才能看到界面。至于null状态只会出现在应用启动的一瞬间。
(四)模块方法
1.addEventListener(type:string,handler:Function)
static静态方法,该用来进行添加一个监听方法进行监听应用状态变化。type类型应该填写change
2.removeEventListener(type:string,handler:Function)
static静态方法,该用来进行移除监听方法.type类型应该填写change
currentState:TypeCaseExpression
当前应用状态类型
(六)使用实例
上面我已经对于AppStateIOS模块做了基本介绍和使用模块属性方法，下面我们用一个实例进行演示一下相关用法，同时会演示App前后台运行状态以及监听处理内存警告次数信息。具体实例代码如下:
* Sample React Native App
* /facebook/react-native
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
AppStateIOS,
} from 'react-native';
class AppStateIOSDemo extends Component {
constructor(props){
super(props);
this.state={
//当前状态
appState: AppStateIOS.currentState,
//进行保存前一个状态
previousAppStates: [],
//内存警告
memoryWarnings: 0,
this._handleAppStateChange = this.handleAppStateChange.bind(this);
this._handleMemoryWarning = this.handleMemoryWarning.bind(this);
//添加监听事件
componentDidMount() {
console.log('componentDidMount invoke...');
AppStateIOS.addEventListener('change', this._handleAppStateChange);
AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
//移除监听事件
componentWillUnmount() {
console.log('componentWillUnmount invoke...');
AppStateIOS.removeEventListener('change', this._handleAppStateChange);
AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
//状态处理
handleAppStateChange(appState) {
var previousAppStates = this.state.previousAppStates.slice();
previousAppStates.push(this.state.appState);
this.setState({
previousAppStates,
handleMemoryWarning() {
this.setState({memoryWarnings: this.state.memoryWarnings + 1});
render() {
&Text style={styles.welcome}&AppStateIOS实例&/Text&
&Text&当前的状态信息数组:{JSON.stringify(this.state.previousAppStates)}&/Text&
&Text&当前的状态信息为:{this.state.appState}&/Text&
&Text&当前的内存警告次数信息为:{this.state.memoryWarnings}&/Text&
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 20,
marginLeft:10,
AppRegistry.registerComponent('AppStateIOSDemo', () =& AppStateIOSDemo);
运行效果如下:
XCode终端日志信息截图:
(七)最后总结
今天我们主要讲解学习了AppStateIOS模块检测iOS App应用的运行状态模块详细介绍以及使用实例，大家有问题可以加一下群React Native技术交流3群().或者底下进行回复一下。
尊重原创，未经授权不得转载：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
在线用户: 4今日访问: 8,288昨日访问: 13,061累计访问: 787,171