Skip to content

Commit 2a9359e

Browse files
author
wenquan0hf
committed
add
new github
1 parent 0b28a73 commit 2a9359e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+8740
-1
lines changed

‎# React Native 中文版(含新增 Android 章节)

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# React Native 中文版(含新增 Android 章节)
2+
3+
Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/)，本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html)。
4+
5+
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
6+
7+
React Native 使你能够使用基于 JavaScript 和 [React](http://wiki.jikexueyuan.com/project/react/) 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
8+
9+
## **React Native for Android**
10+
11+
Facebook 于 2015 年 9 月 15 日发布了 React Native for Android， 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。
12+
13+
### 新增 Android 相关章节:
14+
15+
- [入门](http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html)
16+
- [安装 Android 运行环境](http://wiki.jikexueyuan.com/project/react-native/DevelopmentSetupAndroid.html)
17+
- [教程](http://wiki.jikexueyuan.com/project/react-native/tutorial.html)
18+
- [辅助功能](http://wiki.jikexueyuan.com/project/react-native/Accessibility.html)
19+
- [Native 模块(Android)](http://wiki.jikexueyuan.com/project/react-native/NativeModulesAndroid.html)
20+
- [Native UI 组件(Android)](http://wiki.jikexueyuan.com/project/react-native/NativeComponentsAndroid.html)
21+
- [调试](http://wiki.jikexueyuan.com/project/react-native/debugging.html)
22+
- [在设备上运行(Android)](http://wiki.jikexueyuan.com/project/react-native/RunningOnDeviceAndroid.html)
23+
- [已知 Issues](http://wiki.jikexueyuan.com/project/react-native/KnownIssues.html)
24+
- [DrawerLayoutAndroid](http://wiki.jikexueyuan.com/project/react-native/DrawerLayoutAndroid.html)
25+
- [图像](http://wiki.jikexueyuan.com/project/react-native/image.html)
26+
- [ProgressBarAndroid](http://wiki.jikexueyuan.com/project/react-native/ProgressBarAndroid.html)
27+
- [SwitchAndroid](http://wiki.jikexueyuan.com/project/react-native/SwitchAndroid.html)
28+
- [ToolbarAndroid](http://wiki.jikexueyuan.com/project/react-native/ToolbarAndroid.html)
29+
- [BackAndroid](http://wiki.jikexueyuan.com/project/react-native/backAndroid.html)
30+
- [ToastAndroid](http://wiki.jikexueyuan.com/project/react-native/ToastAndroid.html)
31+
32+
33+
> React Native 官网：[http://facebook.github.io/react-native/](http://facebook.github.io/react-native/)
34+
35+
|更新日期 |更新内容
36+
|----------|--------------------
37+
|2015-09-17|React Native 中文教程(For Android)发布

‎Accessibility.md

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# 辅助功能
2+
3+
## iOS
4+
5+
在 iOS 系统上辅助功能涵盖许多话题，但对许多人来说辅助功能是 VoiceOver 的代名词，即 iOS 3.0 版本以后的一种技术。它充当屏幕阅读器的角色，允许有视觉障碍的人使用 iOS 设备。点击[这里](https://developer.apple.com/accessibility/ios/)了解更多。
6+
7+
## Android
8+
9+
对 Android 系统而言，辅助功能涉及到了许多不同的话题，其中之一是让丧失视力的人能够使用您的应用程序。对于现在的社会，谷歌提供了一个名叫 TalkBack 的内置屏幕读者服务机器人。使用该机器人，你可以使用触摸勘探和手势来使用移动设备和应用程序。TalkBack 可以使用文本语音转换器来阅读屏幕上的内容并且可以发出警报来通知用户有关于应用程序中的重要信息。点击[这里](https://support.google.com/accessibility/android)来了解更多关于 Android 的辅助功能的特征以及点击[这里](https://developer.android.com/guide/topics/ui/accessibility)来了解更多关于使您的本地应用程序的辅助功能。
10+
11+
## 创建辅助性应用程序
12+
13+
### 辅助功能的性质
14+
15+
#### 辅助性（iOS, Android）
16+
17+
如果为 `true`的情况，代表该视图是一个辅助功能元素。当视图是辅助功能元素时，它把它的子元素分组成一个单一的可选组件。默认情况下，可触摸的所有元素都具有辅助性。
18+
19+
在 Android 系统中，在 react-native 视图中 ' accessible={true}' 属性将被翻译成本地命令 ' focusable={true}'。
20+
21+
```java
22+
<View accessible={true}>
23+
<Text>text one</Text>
24+
<Text >text two</Text>
25+
</View>
26+
```
27+
28+
在上面的示例中，我们不能分别在 'text one' 和 'text two' 中获得辅助焦点。相反我们可以在父元素上使用 'accessible' 属性获得焦点。
29+
30+
#### accessibilityLabel (iOS, Android)
31+
32+
如果要将视图标记为具有辅助性，那么一个比较好的做法就是为这个视图设置一个 accessibilityLabel 标签以便使用 VoiceOver 的人知道他们选择了什么元素。当用户选择了一些元素，那么 VoiceOver 将会阅读响应的字符串文本。
33+
34+
若要使用它，在您的视图中将 `accessibilityLabel` 属性设置为一个自定义的字符串：
35+
36+
```java
37+
<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
38+
<View style={styles.button}>
39+
<Text style={styles.buttonText}>Press me!</Text>
40+
</View>
41+
</TouchableOpacity>
42+
```
43+
在上面的示例中，TouchableOpacity 元素中的 `accessibilityLabel` 会被默认的设置为 "点击我！"。 该标签是通过使用空格符来串联所有文本节点子元素构造的。
44+
45+
#### accessibilityTraits (iOS)
46+
47+
辅助功能特征告诉人们他们在使用 VoiceOver 的时候选择了什么元素。此元素是一个标签？一个按钮？还是标头？ `accessibilityTraits` 将会回答这些问题。
48+
49+
如果要使用它，请把 accessibilityTraits 属性设置为 accessibilityTraits 辅助功能字符串(或数组)之一：
50+
51+
- **none** 当元素没有特征的时候使用。
52+
- **button** 当元素需要被当做一个按钮的时候使用。
53+
- **link** 当元素需要被当做链接的时候使用。
54+
- **header** 当元素作为内容部分的标题 (如导航栏中的标题) 的时候使用。
55+
- **search** 当文本字段元素也被视为一个搜索字段的时候使用。
56+
- **image** 当元素需要被作为图像，比如和按钮和链接结合的时候使用。
57+
- **selected** 当该元素被选中时使用。例如，表中被选中的行或者分段控件中选中的按钮。
58+
- **plays** 当元素被激活的并且播放自己的声音的时候使用。
59+
- **key** 当元素充当键盘按键的时候使用。
60+
- **text** 当元素应该被视为不能更改的静态文本的时候使用。
61+
- **summary** 当在应用程序首次启动的时候，该元素可以提供应用程序的实时状况的摘要的时候使用。例如，当关于天气的应用程序首次启动的时候，带有当天天气信息的元素将被该特征所标记。
62+
- **disabled** 当控件未启动并且对用户的输入无响应的时候使用。
63+
- **frequentUpdates** 当元素经常更新其标签或者它的值，但是太平凡的发送通知的时候使用。允许辅助功能客户端轮询更改。秒表就是一个例子。
64+
- **startsMedia** 当激活一个元素并开始一段媒体会话(例如播放电影，录制音频)不应该被辅助技术的输出所打断，比如 VoiceOver。
65+
- **adjustable** 当元素可以被"调整"的时候使用(例如滑块)。
66+
- **allowsDirectInteraction** 当元素允许 VoiceOver 用户直接进行触摸互动的时候使用(例如，表示一个钢琴键盘的视图)。
67+
- **pageTurn** 当它完成阅读的元素的内容时候通知 VoiceOver 需要滚动到下一个页面。
68+
69+
#### onAccessibilityTap (iOS)
70+
71+
使用此属性来分配一个自定义的函数，当有人在一个可访问元素被选中的时候通过双击来激活它的时候来调用该函数。
72+
73+
#### onMagicTap (iOS)
74+
75+
当有人使用 “magic tap”手势，即：用两个手指双击的时候，该属性就会被分配给一个自定义函数，同时，这个函数会被调用。一个魔法敲击函数应该执行用户可以在组件中找到的最具有相关性的操作。在 iPhone 的手机应用程序中，一个魔法敲击可以接听或者结束一个电话。如果所选的元素不具有 `onMagicTap` 功能，该系统将遍历视图层次结构直到它找到一个拥有此功能的视图。
76+
77+
#### accessibilityComponentType (Android)
78+
79+
在某些情况下，我们也要提醒选定的组件类型的最终用户 (即，它是一个"按钮")。如果我们正在使用本机的按钮，那么它会自动工作。由于我们使用的是 javascript，所以我们需要为 TalkBack 提供更多的语境。为了达到这个目的，您必须为所有 UI 组件指定 'accessibilityComponentType' 属性。例如，我们支持 'button'，'radiobutton_checked' 和 'radiobutton_unchecked'等。
80+
81+
```java
82+
<TouchableWithoutFeedback accessibilityComponentType=”button”
83+
onPress={this._onPress}>
84+
<View style={styles.button}>
85+
<Text style={styles.buttonText}>Press me!</Text>
86+
</View>
87+
</TouchableWithoutFeedback>
88+
```
89+
90+
在上面的示例中，TouchableWithoutFeedback 是被 TalkBack 作为一个本机按钮声明的。
91+
92+
#### accessibilityLiveRegion (Android)
93+
94+
当组件动态的更改时，我们希望 TalkBack 去提醒最终用户。'AccessibilityLiveRegion' 属性让这成为可能。它可以被设置为 ‘none’, ‘polite’ 以及 ‘assertive’。
95+
96+
- **none** 辅助功能服务不应该对此视图通知改变的地方。
97+
- **polite** 辅助功能服务应该对此视图通知改变的地方。
98+
- **assertive** 辅助功能服务应该中断正在进行的会话，并且以立即宣布该视图的改变。
99+
100+
```java
101+
<TouchableWithoutFeedback onPress={this._addOne}>
102+
<View style={styles.embedded}>
103+
<Text>Click me</Text>
104+
</View>
105+
</TouchableWithoutFeedback>
106+
<Text accessibilityLiveRegion="polite">
107+
Clicked {this.state.count} times
108+
</Text>
109+
```
110+
111+
在上面的示例方法 _addOne 更改了 state.count 变量。当最终用户单击 TouchableWithoutFeedback 的时候，因为 TalkBack 的 'accessibilityLiveRegion=”polite”' 属性，所以它读取了文本视图中的文本。
112+
113+
#### importantForAccessibility (Android)
114+
115+
对于两个重叠的并且拥有相同父元素的 UI 组件，默认的辅助功能焦点可以有不可预知的行为。如果一个视图触发辅助事件并且它被汇报给了辅助功能服务器，那么 'ImportantForAccessibility' 属性将会通过控制解决它，它可以被设置为‘auto’, ‘yes’, ‘no’ 以及 ‘no-hide-descendants’ (最后一个值将迫使辅助功能服务忽略该组件和它的所有子元素)。
116+
117+
```java
118+
<View style={styles.container}>
119+
<View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
120+
backgroundColor: 'green'}} importantForAccessibility=”yes”>
121+
<Text> First layout </Text>
122+
</View>
123+
<View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
124+
backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendant”>
125+
<Text> Second layout </Text>
126+
</View>
127+
</View>
128+
```
129+
130+
在上面的示例中，对于 TalkBack 以及其他的辅助功能服务而言，黄色的布局及其后代是完全不可见的。所以我们可以容易的使用来自于同一个父元素并且不带有令人疑惑的 TalkBack 的视图。
131+
132+
### 发送辅助功能事件（Android）
133+
134+
有时候在 UI 组件中去触发一个辅助功能事件很有用 (即当一个自定义的视图在屏幕上显示或自定义单选按钮已被选中)。为了达到这个目的，本地 UIManager 模块公布了一个名叫 'sendAccessibilityEvent' 的方法。它拥有两个参数： 视图标签和一个类型的事件。
135+
136+
```java
137+
_onPress: function() {
138+
this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
139+
“radiobutton_unchecked” : “radiobutton_checked”;
140+
if (this.state.radioButton === “radiobutton_checked”) {
141+
RCTUIManager.sendAccessibilityEvent(
142+
React.findNodeHandle(this),
143+
RCTUIManager.AccessibilityEventTypes.typeViewClicked);
144+
}
145+
}
146+
147+
<CustomRadioButton
148+
accessibleComponentType={this.state.radioButton}
149+
onPress={this._onPress}/>
150+
```
151+
152+
在上面的例子中，我们创建了一个如同本按钮的自定义单选按钮。更具体地说，TalkBack 可以正确的公布单选按钮选择的变化。
153+
154+
## 测试 VoiceOver 支持的内容（iOS）
155+
156+
如果要启用 VoiceOver，那么请在你的 iOS 设备上打开设置应用程序的位置。点击 General，然后点击 Accessibility。那里你会发现许多人们用来优化他们的设备的工具，比如粗体文本、 增加的对比度以及 VoiceOver。
157+
158+
如果要启用 VoiceOver，点击 "Vision" 下的 VoiceOver，打开显示在顶部的开关。
159+
160+
在辅助功能设置的最底部，还有一个"辅助功能的快捷方式"。你可以使用它三次单击主页按钮来触发 VoiceOver。

‎DevelopmentSetupAndroid.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# 安装 Android 运行环境
2+
3+
本指南描述了在安卓模拟器上运行 React Native 安卓应用程序所需要的开发环境的基本安装步骤。在这里我们不讨论诸如 IDE 的开发工具配置。
4+
5+
这些指南只包含了从头开始安装的过程。如果你恰好有一些旧的、 过时的 Android SDK 版本，请务必把所需的包更新至下面提到的版本并安装所有缺少的部分。
6+
7+
## 安装和配置 SDK
8+
9+
1. [安装最新的 JDK](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
10+
2. 使用 `brew install android-sdk` 来安装安卓 SDK。
11+
3. 将它添加到 `~/.bashrc`, `~/.zshrc` 或者任何其他您的 shell 所使用的路径：
12+
export ANDROID_HOME=/usr/local/opt/android-sdk
13+
4. 启动一个新的 shell 并且运行 `android`；在出现窗口中请检查：
14+
* Android SDK 生成工具版本 23.0.1
15+
* Android 6.0 (API 23)
16+
* Android Support Repository
17+
5. 点击 "Install Packages".
18+
19+
## 安装和运行 Android 原生模拟器
20+
21+
1. 启动一个新的 shell 并且运行 `android`;在出现窗口中请检查：
22+
* Intel x86 原生系统映像 （支持 Android 5.1.1 - API 22）
23+
* Intel x86 仿真器加速器 （HAXM 安装）
24+
![SDK 管理器窗口](images/AndroidSDK1.png)
25+
26+
![SDK 管理器窗口](images/AndroidSDK2.png)
27+
2. 点击 "Install Packages".
28+
3. [配置 HAXM](http://developer.android.com/tools/devices/emulator.html#vm-mac).
29+
4. 使用安卓模拟器创建一个 Android 的虚拟设备 (AVD)：
30+
1. 运行 `android avd` 并且点击 **Create...**
31+
![创建 AVD 对话框](images/CreateAVD.png)
32+
2. 选定该新的 AVD, 并且点击 `Start...`

‎DrawerLayoutAndroid.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# DrawerLayoutAndroid
2+
3+
React 组件封装平台 `DrawerLayout`（仅适用于Android）。Drawer（通常用于导航）呈现 `renderNavigationView` 渲染导航视图和直接子级，是呈现（您的内容）的主要视图。导航视图是最初在屏幕上不可见的，但可以从由 `drawerPosition` 指定的窗口的侧面拉出，其宽度可通过 `drawerWidth` 设置。
4+
5+
例如：
6+
7+
```java
8+
render: function() {
9+
var navigationView = (
10+
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the
11+
Drawer!</Text
12+
);
13+
return (
14+
<DrawerLayoutAndroid
15+
drawerWidth={300}
16+
drawerPosition={DrawerLayoutAndroid.positions.Left}
17+
renderNavigationView={() =navigationView}
18+
<Text style={{10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
19+
<Text style={{10, fontSize: 15, textAlign: 'right'}}>World!</Text>
20+
</DrawerLayoutAndroid>
21+
);
22+
},
23+
```
24+
25+
## 属性
26+
27+
**drawerPosition** enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)
28+
29+
指定 drawer 将从屏幕的一侧滑动。
30+
31+
**drawerWidth** number
32+
33+
指定 drawer 的宽度，即从窗口的边缘拉到视图更精确的宽度。
34+
**keyboardDismissMode** enum('none', "on-drag")
35+
36+
确定键盘是否响应拖动被驳回。
37+
-'none' (默认值), 拖动不影响键盘。
38+
-'on-drag', 拖动开始，键盘被驳回。
39+
40+
**onDrawerClose** 函数
41+
42+
导航视图关闭时调用函数。
43+
44+
**onDrawerOpen** 函数
45+
46+
导航视图打开时调用函数。
47+
48+
**onDrawerSlide** 函数
49+
50+
与导航视图交互时调用函数。
51+
52+
**onDrawerStateChanged** 函数
53+
54+
当 Drawer 状态发生变化时调用函数，drawer 有 3 种状态:
55+
- idle, 表示与导航视图没有交互
56+
- dragging,表示目前有与导航视图的交互
57+
- settling, 表示有与导航视图的交互，并且导航视图正在的关闭或打开。
58+
59+
**renderNavigationView** 函数
60+
61+
导航图将被渲染到屏幕的一侧，并且可以拉出。
62+
63+

‎GettingStarted.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# 入门
2+
3+
## 要求
4+
5+
1. OS X - 当前仅支持 OS X
6+
2. 推荐使用 [Homebrew](http://brew.sh/) 的方式来安装 nvm，watchman 和 flow。
7+
3. 安装 [Node.js](https://nodejs.org/) 4.0 或者更新的版本。
8+
- 使用 Homebrew 来安装 **nvm** 或者参考 [它的安装指南](https://github.com/creationix/nvm#installation)。接着运行 `nvm install node && nvm alias default node`, 它可以让您安装最新版本的 Node.js 并设置您的终端，所以你可以通过键入 `node` 来运行它。使用 Nvm 可以让您安装多个版本的 Node.js 并且在它们之间轻松切换。
9+
- [npm](https://docs.npmjs.com/) 的更新之处。
10+
4. `brew 安装 watchman`。我们推荐您安装 [watchman](https://facebook.github.io/watchman/docs/install.html), 否则您可能在点击一个节点文件的时候出现错误。
11+
5. `brew 安装 flow`。如果您想使用 [flow](http://www.flowtype.org).
12+
13+
我们建议定期运行 `brew update && brew upgrade` 来使您的应用程序保持最新状态。
14+
15+
## 安装 iOS
16+
17+
我们需要 [Xcode](https://developer.apple.com/xcode/downloads/) 6.3 或者更高的版本。 您可以在 App 应用商店里面安装它。
18+
19+
## 安装 Android
20+
21+
如果想要编写 React Native 安卓应用程序， 您需要安装安卓 SDK （如果您不想在真机上运行您的应用程序，那么您还需要一个安卓模拟器）。请参阅[安卓安装指南](DevelopmentSetupAndroid.md) 说明来配置你的安卓环境 。
22+
23+
## 快速开始
24+
25+
$ npm install -g react-native-cli
26+
$ react-native init AwesomeProject
27+
$ cd AwesomeProject/
28+
29+
**运行 iOS 应用程序：**
30+
31+
- 在 Xcode 中打开 `ios/AwesomeProject.xcodeproj` 并且点击运行。
32+
- 在选定的文本编辑器中打开 `index.ios.js` 并且编辑代码。
33+
- 点击 iOS 模拟器中的 ⌘-R 来重新加载应用程序并且观察发生的变化！
34+
35+
**运行 Android 应用程序：**
36+
37+
* `$ react-native run-android`
38+
* 在选定的文本编辑器中打开 `index.android.js` 并且编辑代码。
39+
* 按下菜单按钮 （默认情况下是 F2，或在 Genymotion 中点击 ⌘ M），然后选择 * Reload JS * 看看发生了什么变化！
40+
* 在一个终端中运行 `adb logcat *:S ReactNative:V ReactNativeJS:V` 来查看您的应用程序日志。
41+
42+
祝贺你！你已经成功运行并修改了你的第一个 React Native 应用程序。
43+
44+
_如果您在开始的时候遇到任何问题，请参阅 [故障诊断页面](http://facebook.github.io/react-native/docs/troubleshooting.html#content)
45+
46+
## 让安卓支持现有的 React Native 项目
47+
48+
如果您现在已经拥有一个(iOS) React Native 项目并且想让安卓也支持它, 那么您需要在您现有的项目目录中执行以下命令：
49+
50+
1.将您 `package.json` 文件中的 `react-native`目录更新到[最新的版本](https://www.npmjs.com/package/react-native)
51+
2. `$ npm install`
52+
3. `$ react-native android`

0 commit comments

Comments
 (0)