React Native 学习笔记(二)

React Native NavigatorIOS API 使用

通过学习React Native的NavigatorIOS发现官方写的Demo不便于新手学习,现把自己学习过程遇到的坑记录并分享出来。

NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。

路由

React Navtie通过路由:一个路由是用于描述导航器中一页的对象。NavigatorIOS的第一个路由通过initialRoute属性来提供。

1
2
3
4
5
6
7
8
9
10
11
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My View Title',
passProps: { myProp: 'foo' },
}}
/>
);
}

现在MyView会被导航器渲染出来。它可以通过route属性获得对应的路由对象,导航器本身,还有所有passProps中传递的属性。

initialRoute 两个必须属性 :component title

initialRoute的完整属性定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
initialRoute: PropTypes.shape({
/**
* The React Class to render for this route
*/
component: PropTypes.func.isRequired,
/**
* The title displayed in the navigation bar and the back button for this
* route.
*/
title: PropTypes.string.isRequired,
/**
* If set, a title image will appear instead of the text title.
*/
titleImage: Image.propTypes.source,
/**
* Use this to specify additional props to pass to the rendered
* component. `NavigatorIOS` will automatically pass in `route` and
* `navigator` props to the comoponent.
*/
passProps: PropTypes.object,
/**
* If set, the left navigation button image will be displayed using this
* source. Note that this doesn't apply to the header of the current
* view, but to those views that are subsequently pushed.
*/
backButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button text will be set to this. Note that
* this doesn't apply to the left button of the current view, but to
* those views that are subsequently pushed
*/
backButtonTitle: PropTypes.string,
/**
* If set, the left navigation button image will be displayed using
* this source.
*/
leftButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button will display this text.
*/
leftButtonTitle: PropTypes.string,
/**
* This function will be invoked when the left navigation bar item is
* pressed.
*/
onLeftButtonPress: PropTypes.func,
/**
* If set, the right navigation button image will be displayed using
* this source.
*/
rightButtonIcon: Image.propTypes.source,
/**
* If set, the right navigation button will display this text.
*/
rightButtonTitle: PropTypes.string,
/**
* This function will be invoked when the right navigation bar item is
* pressed.
*/
onRightButtonPress: PropTypes.func,
/**
* Styles for the navigation item containing the component.
*/
wrapperStyle: View.propTypes.style,
/**
* Boolean value that indicates whether the navigation bar is hidden.
*/
navigationBarHidden: PropTypes.bool,
/**
* Boolean value that indicates whether to hide the 1px hairline
* shadow.
*/
shadowHidden: PropTypes.bool,
/**
* The color used for the buttons in the navigation bar.
*/
tintColor: PropTypes.string,
/**
* The background color of the navigation bar.
*/
barTintColor: PropTypes.string,
/**
* The text color of the navigation bar title.
*/
titleTextColor: PropTypes.string,
/**
* Bboolean value that indicates whether the navigation bar is
* translucent.
*/
translucent: PropTypes.bool,
}).isRequired,

导航器

导航器是一个object,包含了一系列导航函数,可供视图调用。它会作为props传递给NavigatorIOS渲染的任何组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class MyView extends Component {
_handleBackPress() {
this.props.navigator.pop();
}
_handleNextPress(nextRoute) {
this.props.navigator.push(nextRoute);
}
render() {
const nextRoute = {
component: MyView,
title: 'Bar That',
passProps: { myProp: 'bar' }
};
return(
<TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
<Text style={{marginTop: 200, alignSelf: 'center'}}>
See you on the other nav {this.props.myProp}!
</Text>
</TouchableHighlight>
);
}
}

导航器对象包含如下的函数:

  • push(route) - 导航器跳转到一个新的路由。
  • pop() - 回到上一页。
  • popN(n) - 回到N页之前。当N=1的时候,效果和pop()一样。
  • replace(route) - 替换当前页的路由,并立即加载新路由的视图。
  • replacePrevious(route) - 替换上一页的路由/视图。
  • replacePreviousAndPop(route) - 替换上一页的路由/视图并且立刻切换回上一页。
  • resetTo(route) - 替换最顶级的路由并且回到它。
  • popToRoute(route) - 回到某个指定的路由。
  • popToTop() - 回到最顶层的路由。

Ref引用方式获取NavigatorIOS的导航函数

导航函数也可以从NavigatorIOS的子组件中获得:
从子组件中获得导航函数一定要注意,只能通过Ref引用方式。否则使用this.props.navigator.push() 会报错:undefined is not an object(evaluationg 'this.props.navigator.push') 未定义对象错误。

1
2
3
4
5
6
7
8
9
10
11
12
class MyView extends Component {
_handleNavigationRequest () {
this.refs.nav.push();
}
render(){
<NavigatorIOS ref='nav' initialRoute={ component: FirstScene,
title: 'First Scene',
rightButtonTitle: 'More',
onRightButtonPress: () => this._handleNavigationRequest()} />
}
}

Demo介绍

Demo有三个文件,分别是index.ios.js FirstScene.js SecondScene.js

其中index.ios.js里进行了NavigatorIOS的组件渲染,在导航栏右边有一个More按钮,点击可以Push SecondScene.js
页面。
NavigatorIOSinitialRoute里的componetFirstScene(第一个Route组件对象,相当于iOSUINavigationControllerrootViewCotroller)。title:'First Scene'。(title可以随意字符串)。
()。
FirstScene里面有一个按钮,点击也可以Push SecondScene.js 页面。使用NavigatorIOS的主要原因是可以让原生UINavigationController
一样可以使用左划功能来返回到上一界面
Demo地址:
https://github.com/MsgIM/MsgIMNavi.git

React Native学习笔记(一)

React Native 简介

React Native的官方地址是 http://facebook.github.io/react-native/ 最新版本号:v0.32.0
官网的介绍是使用React构建Native应用的框架(A framework for building native apps with React.) React Native采用的语法也是ReactReact Native的目标是高效跨平台地开发Native应用,同时,也强调了“一次学习,多个平台编写代码”。也就是说,React Native不是“一次编码,多处运行”。如下图所示,React Native是构建在ReactJSX基础上的。因此,只要基本掌握了ReactJSX,同时补充相关平台(iOS,Android,Web)的知识,就能开发Native应用和Web应用。

test

相关 React Native 的地址。
官方网站: http://facebook.github.io/react-native/
中文网站: http://reactnative.cn
版本发布: http://github.com/facebook/react-native/releases
Github地址: https://github.com/facebook/react-native
Issues地址: https://github.com/facebook/react-native/issues

搭建运行环境

安装

必需的软件

Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

1
sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js

React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。

1
brew install node

React Native的命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

1
npm install -g react-native-cli

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew注,修复/usr/local目录的所有权:

1
sudo chown -R `whoami` /usr/local

Xcode

React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDEXcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode -> Preferences -> Locations菜单中检查一下是否装有某个版本的Command Line ToolsXcode的命令行工具中也包含一些必须的工具,比如git等.

推荐安装的工具

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

1
brew install watchman

Nuclide

Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档

注:我们更推荐使用WebStormSublime Text 来编写React Native应用

测试安装

1
2
3
react-native init TestProject
cd TestProject
react-native run-ios

你也可以在Nuclide中打开TestProject文件夹 然后运行,或是双击ios/TestProject.xcodeproj文件然后在Xcode中点击Run按钮。

或者命令行执行:

进入TestProject路径:

运行 iOS 程序:

1
2
cd ~/TestProject
react-native run-ios

运行 Android 程序:

1
2
cd ~/TestProject
react-native run-android

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

使用你喜欢的编辑器打开index.ios.js并随便改上几行。
iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

恭喜,完成了!

你已经成功运行并修改了你的第一个React Native应用。