Sync 0.62

cndocs/accessibilityinfo.md

@@ -10,10 +10,10 @@ title: AccessibilityInfo
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>

cndocs/activityindicator.md

@@ -10,10 +10,10 @@ title: ActivityIndicator
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>

cndocs/alert.md

@@ -14,10 +14,10 @@ title: Alert
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>

cndocs/animated.md

@@ -35,10 +35,10 @@ The following example contains a `View` which will fade in and fade out based on
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>
@@ -347,12 +347,12 @@ Config 参数有以下这些属性：
 
 注意你不能同时定义 bounciness/speed、tension/friction 或 stiffness/damping/mass 这三组数据，只能指定其中一组：
 
-friction/tension 或 bounciness/speed 选项符合[Facebook Pop](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), 或是 [Origami](http://origami.design/)中的spring模型定义。
+friction/tension 或 bounciness/speed 选项符合[Facebook Pop](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), 或是 [Origami](http://origami.design/)中的 spring 模型定义。
 
-- `friction`: 控制弹性/幅度。默认值7。
-- `tension`: 控制速度。默认值40.
-- `speed`: 控制动画速度。默认值12.
-- `bounciness`: 控制弹性。默认值8.
+- `friction`: 控制弹性/幅度。默认值 7。
+- `tension`: 控制速度。默认值 40.
+- `speed`: 控制动画速度。默认值 12.
+- `bounciness`: 控制弹性。默认值 8.
 
 Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an analytical spring model based on the motion equations of a [damped harmonic oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
 
@@ -480,11 +480,11 @@ static stagger(time, animations)
 static loop(animation, config?)
 ```
 
-无限循环一个指定的动画，从头到尾周而复始。如果此循环的子动画设置了`useNativeDriver: true`则不会阻塞JS线程的执行。此外循环可能导致基于`VirtualizedList`的列表不能加载更多行，此时可以在子动画中设置`isInteraction: false`来修复此问题。
- 
- Config is an object that may have the following options:
- 
- * `iterations`: Number of times the animation should loop. Default `-1` (infinite).
+无限循环一个指定的动画，从头到尾周而复始。如果此循环的子动画设置了`useNativeDriver: true`则不会阻塞 JS 线程的执行。此外循环可能导致基于`VirtualizedList`的列表不能加载更多行，此时可以在子动画中设置`isInteraction: false`来修复此问题。
+
+Config is an object that may have the following options:
+
+- `iterations`: Number of times the animation should loop. Default `-1` (infinite).
 
 ---
 
@@ -544,9 +544,9 @@ Animations are started by calling start() on your animation. start() takes a com
 
 **Parameters:**
 
-| Name     | Type                            | Required | Description                                                                                                                                                     |
-| -------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| callback | ?(result?: {finished: boolean}) | No       | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |
+| Name | Type | Required | Description |
+| --- | --- | --- | --- |
+| callback | ?(result?: {finished: boolean}) | No | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |
 
 Start example with callback:
 
@@ -576,7 +576,6 @@ static reset()
 
 Stops any running animation and resets the value to its original.
 
-
 ## 属性
 
 ### `Value`

cndocs/animations.md

@@ -9,8 +9,7 @@ React Native 提供了两个互补的动画系统：用于创建精细的交互
 
 ## `Animated`
 
-[`Animated`](animated)使得开发者可以简洁地实现各种各样的动画和交互方式，并且具备极高的性能。`Animated`旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用`start/stop`方法来控制动画按顺序执行。
-`Animated`仅封装了6个可以动画化的组件：`View`、`Text`、`Image`、`ScrollView`、`FlatList`和`SectionList`，不过你也可以使用`Animated.createAnimatedComponent()`来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图：
+[`Animated`](animated)使得开发者可以简洁地实现各种各样的动画和交互方式，并且具备极高的性能。`Animated`旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用`start/stop`方法来控制动画按顺序执行。 `Animated`仅封装了 6 个可以动画化的组件：`View`、`Text`、`Image`、`ScrollView`、`FlatList`和`SectionList`，不过你也可以使用`Animated.createAnimatedComponent()`来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图：
 
 ```SnackPlayer
 import React, { useRef, useEffect } from 'react';
@@ -55,9 +54,9 @@ export default () => {
 
 我们来分解一下这个过程。在`FadeInView`的构造函数里，我们创建了一个名为`fadeAnim`的`Animated.Value`，并放在`state`中。而`View`的透明度是和这个值绑定的。
 
-组件加载时，透明度首先设为 0。然后一个easing动画开始改变`fadeAnim`值，同时会导致所有与其相关联的值（本例中是透明度）也逐帧更新，最终和`fadeAnim`一样变为1。
+组件加载时，透明度首先设为 0。然后一个 easing 动画开始改变`fadeAnim`值，同时会导致所有与其相关联的值（本例中是透明度）也逐帧更新，最终和`fadeAnim`一样变为 1。
 
-这一过程经过特别优化，执行效率会远高于反复调用`setState`和多次重渲染。 
+这一过程经过特别优化，执行效率会远高于反复调用`setState`和多次重渲染。
 
 因为这一过程是纯声明式的，因此还有进一步优化的空间，比如我们可以把这些声明的配置序列化后发送到一个高优先级的线程上运行。
 
@@ -69,7 +68,7 @@ export default () => {
 
 By default, `timing` will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
 
-下面这个例子创建了一个2秒长的动画，在移动目标到最终位置前会稍微往后退一点：
+下面这个例子创建了一个 2 秒长的动画，在移动目标到最终位置前会稍微往后退一点：
 
 ```jsx
 Animated.timing(this.state.xPosition, {
@@ -185,7 +184,7 @@ value.interpolate({
 ```jsx
 value.interpolate({
   inputRange: [0, 360],
-  outputRange: ["0deg", "360deg"]
+  outputRange: ['0deg', '360deg']
 });
 ```
 
@@ -232,10 +231,10 @@ The following example implements a horizontal scrolling carousel where the scrol
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>
@@ -525,10 +524,10 @@ onPanResponderMove={Animated.event(
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>
@@ -646,8 +645,8 @@ const styles = StyleSheet.create({
 
 你可能会注意到这里没有一个明显的方法来在动画的过程中读取当前的值——这是出于优化的角度考虑，有些值只有在原生代码运行阶段中才知道。如果你需要在 JavaScript 中响应当前的值，有两种可能的办法：
 
-* `spring.stopAnimation(callback)`会停止动画并且把最终的值作为参数传递给回调函数`callback`——这在处理手势动画的时候非常有用。
-* `spring.addListener(callback)`会在动画的执行过程中持续异步调用`callback`回调函数，提供一个最近的值作为参数。这在用于触发状态切换的时候非常有用，譬如当用户拖拽一个东西靠近的时候弹出一个新的气泡选项。不过这个状态切换可能并不会十分灵敏，因为它不像许多连续手势操作（如旋转）那样在 60fps 下运行。
+- `spring.stopAnimation(callback)`会停止动画并且把最终的值作为参数传递给回调函数`callback`——这在处理手势动画的时候非常有用。
+- `spring.addListener(callback)`会在动画的执行过程中持续异步调用`callback`回调函数，提供一个最近的值作为参数。这在用于触发状态切换的时候非常有用，譬如当用户拖拽一个东西靠近的时候弹出一个新的气泡选项。不过这个状态切换可能并不会十分灵敏，因为它不像许多连续手势操作（如旋转）那样在 60fps 下运行。
 
 `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
 
@@ -681,8 +680,7 @@ Animated.timing(this.state.animatedValue, {
       }
     ],
     { useNativeDriver: true } // <-- 加上这一行
-  )}
->
+  )}>
   {content}
 </Animated.ScrollView>
 ```
@@ -715,8 +713,8 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
 
 The RNTester app has various examples of `Animated` in use:
 
-* [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp)
-* [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js)
 
 ## `LayoutAnimation` API
 

cndocs/appstate.md

@@ -9,12 +9,12 @@ AppState 通常在处理推送通知的时候用来决定内容和对应的行
 
 ### App States
 
-* `active` - 应用正在前台运行
-* `background` - 应用正在后台运行。用户可能面对以下几种情况：
-  * 在别的应用中
-  * 停留在桌面
-  * 对 Android 来说还可能处在另一个`Activity`中（即便是由你的应用拉起的）
-* [iOS] `inactive` - 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。
+- `active` - 应用正在前台运行
+- `background` - 应用正在后台运行。用户可能面对以下几种情况：
+  - 在别的应用中
+  - 停留在桌面
+  - 对 Android 来说还可能处在另一个`Activity`中（即便是由你的应用拉起的）
+- [iOS] `inactive` - 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。
 
 要了解更多信息，可以阅读[Apple 的文档](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)。
 
@@ -25,10 +25,10 @@ AppState 通常在处理推送通知的时候用来决定内容和对应的行
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
     <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
+      Class组件示例
     </li>
   </ul>
 </div>

cndocs/backhandler.md

@@ -3,18 +3,19 @@ id: backhandler
 title: BackHandler
 ---
 
-BackHandler API用于监听设备上的后退按钮事件，可以调用你自己的函数来处理后退行为。此API仅能在Android上使用。
+BackHandler API 用于监听设备上的后退按钮事件，可以调用你自己的函数来处理后退行为。此 API 仅能在 Android 上使用。
 
 回调函数是倒序执行的（即后添加的函数先执行）。
+
 - **如果某一个函数返回 true**，则后续的函数都不会被调用。
 - **如果没有添加任何监听函数，或者所有的监听函数都返回 false**，则会执行默认行为，退出应用。
-  
-> 注意：如果app当前打开了一个`Modal`窗口，则BackHandler不会触发事件。([查看`Modal`的文档](modal.md#onrequestclose)).
+
+> 注意：如果 app 当前打开了一个`Modal`窗口，则 BackHandler 不会触发事件。([查看`Modal`的文档](modal.md#onrequestclose)).
 
 ## 用法
 
 ```jsx
-BackHandler.addEventListener('hardwareBackPress', function() {
+BackHandler.addEventListener('hardwareBackPress', function () {
   /**
    * this.onMainScreen()和this.goBack()两个方法都只是伪方法，需要你自己去实现
    * 一般来说都要配合导航器组件使用
@@ -41,9 +42,9 @@ The following example implements a scenario where you confirm if the user wants
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
-    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+    <lClass组件示例"button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
       Class Component Example
     </li>
   </ul>
@@ -162,9 +163,9 @@ Additionally `BackHandler.removeEventListener` can also be used to clear the eve
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
+      函数组件示例
     </li>
-    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+    <lClass组件示例"button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
       Class Component Example
     </li>
   </ul>