Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit 82142cc
Merge: 38be89c aa97a8f
Author: sunnylqm <[email protected]>
Date:   Mon Dec 7 17:10:40 2020 +0800

    Merge branch 'master' of https://github.com/facebook/react-native-website into facebook-master

    # Conflicts:
    #	website/core/Footer.js

commit 38be89c
Merge: 0d9a929 bcb8a3d
Author: Sunny Luo <[email protected]>
Date:   Mon Dec 7 16:46:37 2020 +0800

    Merge pull request #315 from noah227/production

    做了一些调整

commit bcb8a3d
Author: Sunny Luo <[email protected]>
Date:   Mon Dec 7 15:47:32 2020 +0800

    Update pressable.md

commit 0d9a929
Merge: e9c11c0 d959587
Author: Sunny Luo <[email protected]>
Date:   Mon Dec 7 15:14:38 2020 +0800

    Merge pull request #316 from hqwlkj/patch-4

    Update typescript.md

commit d959587
Author: Yanghc <[email protected]>
Date:   Mon Dec 7 15:02:20 2020 +0800

    Update typescript.md

commit 21eeb45
Author: noah227 <[email protected]>
Date:   Mon Dec 7 12:10:33 2020 +0800

commit e9c11c0
Merge: 3ebae53 dbac391
Author: Sunny Luo <[email protected]>
Date:   Mon Dec 7 11:10:45 2020 +0800

    Merge pull request #309 from noah227/production

    cndocs pressable translation(partially)

commit dbac391
Author: Sunny Luo <[email protected]>
Date:   Mon Dec 7 11:06:28 2020 +0800

    Update pressable.md

commit aa97a8f
Author: Ray Holland <[email protected]>
Date:   Sat Dec 5 17:06:02 2020 -0600

    Update drawerlayoutandroid.md (facebook#2342)

    * Update drawerlayoutandroid.md

    More detailed example of how to use openDrawer and closeDrawer

    * revert changes, update snack example, update base docs

    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit 92f92be
Author: Ilya Zarembsky <[email protected]>
Date:   Sat Dec 5 17:22:46 2020 -0500

    Recommend Node be installed via nvm-windows (facebook#2312)

    * Recommend Node be installed via nvm-windows

    By installing Node via nvm-windows instead of directly, users will be able to easily switch between the multiple different versions of Node that their various projects may require.

    * Pacify language linter

    * convert nvm addition to separate paragraph, update base docs

    * revert change in versioned docs

    Co-authored-by: Ilya Zarembsky <[email protected]>
    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit e50d8a4
Author: Bartosz Kaszubowski <[email protected]>
Date:   Sat Dec 5 22:54:33 2020 +0100

    fix few Lighthouse warnings, remove old Footer file (facebook#2371)

commit ecd6041
Author: Bartosz Kaszubowski <[email protected]>
Date:   Sat Dec 5 20:44:50 2020 +0100

    update Share, Shadow and View Props pages to match latest patterns (facebook#2370)

commit 03eb786
Author: Luis Miguel Alvarado <[email protected]>
Date:   Sat Dec 5 14:13:36 2020 -0400

    [docs]: Add 0.64 required updates to the documentation - Part 1/x (facebook#2368)

    * Add support for shadowColor on Android >= 28

    * Add support to image progress event on Android

    * ScrollView now supports contentOffset in Android

    * Add showSoftInputOnFocus to TextInput on iOS

    * Removed DEPRECATED_sendUpdatedChildFrames prop from ScrollView

    * Added unstable_pressDelay prop to Pressable

    * Apply suggested changes

commit 0ad8af3
Author: Bartosz Kaszubowski <[email protected]>
Date:   Sat Dec 5 14:57:59 2020 +0100

    add loading param to remark-snackplayer plugin (facebook#2367)

commit 3e30040
Author: Magnus Brattlöf <[email protected]>
Date:   Sat Dec 5 14:57:42 2020 +0100

    Extends and class are no longer part of the example code 'above'. Add… (facebook#2366)

    * Extends and class are no longer part of the example code 'above'. Added the arrow function as an additional example

    * use fix from the current docs

    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit 48e2417
Author: Xuan Huang (黄玄) <[email protected]>
Date:   Fri Dec 4 09:12:36 2020 -0800

    Update hermes.md to include RN compatibility (facebook#2361)

    * Update hermes.md to include RN compatibility

    Hermes works more reliably following the versions explicitly documented in its releases page.

    This is suggested by the community at facebook/hermes#33 (comment)

    * port the addition to the base docs

    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit 3c72887
Author: Xuan Huang (黄玄) <[email protected]>
Date:   Fri Dec 4 08:18:34 2020 -0800

    Update hermes.md to explain debugging on Hermes (facebook#2360)

    * Update hermes.md to explain debugging on Hermes

    This has been a frequently source of confusion. See facebook/hermes#48 (comment) for an example.

    * fix link format, update base docs

    * add missing tweak to base docs

    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit c5f95fa
Author: Bartosz Kaszubowski <[email protected]>
Date:   Thu Dec 3 19:19:36 2020 +0100

    fix "Javascript" capitalization typo across all docs (facebook#2365)

commit 572843a
Author: Moti Zilberman <[email protected]>
Date:   Thu Dec 3 17:50:57 2020 +0000

    Javascript->JavaScript in native-modules-intro (facebook#2364)

    Capitalisation fix.

commit 1e82527
Author: lauramedalia <[email protected]>
Date:   Thu Dec 3 10:01:42 2020 -0500

    Updating Native Modules Documentation (facebook#2261)

    * feat: updating Native Modules docs

    * feat: update native modules documentation (missed the docs changes)

    * converting nativemodules to native modules

    * language lint tweaks

    * Update docs/native-modules-ios.md

    * feat: apply code review comments that needed grammer. changes

    * feat: updating intro

    * feat: apply comment changes

    * feat: remove () from method names

    * feat: cleaning up docs/responding to comments

    * feat: adding the new titles to the original docs

    * feat: updating base doc title

    * feat:  cleaning up notes and removing references to other mobile platforms in mobile platform docs

    * feat: updating some we's to you's

    * pulling direct manipulation out

    * fixing some outstanding yous and wes

    * updating these to new titles

    * move ios/android native components section under native components

    * Adding platform agnostic note back (it was removed when removing content related to iOS from this androids section)

    * fixing an out of date link to the getting started guides

    * correcting link

    * adding turbomodules note

    * adding parentheses for method names

    * native module consistency

    * editing run ios/android commands

    * using correct code block for java

    * removing this file, must have stuck around after a merge conflict but its not needed but it should no longer exist in docusouras V2 (i18n will be added in the future)

    * only editing in 0.63 moving forward

    * original_id is not needed

    * cleaning up white space

    * using correct Apostrophe characters

    * moving argument types to a table

    * adding note about where we are adding the method

    * adding a link to info on turbo modules

    Co-authored-by: lauramedalia <[email protected]>
    Co-authored-by: Ramanpreet Nara <[email protected]>

commit bfe4f83
Author: Bartosz Kaszubowski <[email protected]>
Date:   Thu Dec 3 11:25:03 2020 +0100

    refreshed FB OSS logo, footer and menu small UI tweaks (facebook#2362)

commit 3ebae53
Author: sunnylqm <[email protected]>
Date:   Thu Dec 3 16:28:49 2020 +0800

    Trigger update

commit feb0d32
Author: Ben McDonald <[email protected]>
Date:   Thu Dec 3 02:00:26 2020 -0500

    Update intro-react-native-components.md (facebook#2363)

    Small typo.  A grammatical fix.

commit 7d6a964
Author: Harsh Thakkar <[email protected]>
Date:   Wed Dec 2 05:44:52 2020 +0530

    Installation word spelling mistake (facebook#2353)

    * Installation word spelling mistake

    * fix remaining "intallation" typos

    Co-authored-by: Bartosz Kaszubowski <[email protected]>

commit f3ee2ef
Author: Jessica Lin <[email protected]>
Date:   Tue Dec 1 15:39:30 2020 -0800

    Add Call of Duty Companion App, NerdWallet, Foreca, LendMN, and FlipKart into showcase (facebook#2344)

    * Add Call of Duty Companion App and NerdWallet into showcase

    * Move Discord up on showcase

    * Add FlipKart, Foreca, LendMN to showcase

commit dcfcda3
Author: Bartosz Kaszubowski <[email protected]>
Date:   Mon Nov 30 14:00:44 2020 +0100

    add simple React Native logo animation (facebook#2339)

commit 2354d56
Author: Bartosz Kaszubowski <[email protected]>
Date:   Mon Nov 30 13:58:44 2020 +0100

    small tweaks for the docs sidebar (facebook#2359)

commit 87fa863
Author: Bartosz Kaszubowski <[email protected]>
Date:   Mon Nov 30 13:17:45 2020 +0100

    add temporary fix for navbar overflow issue (facebook#2358)

    * add temporary fix for navbar overflow issue

    * small tweak

commit 572f7a7
Author: noah227 <[email protected]>
Date:   Sun Nov 29 19:03:47 2020 +0800

    pressable.md 翻译（不完全）小调整

commit 267770c
Author: noah227 <[email protected]>
Date:   Sun Nov 29 18:49:13 2020 +0800

    pressable.md 翻译细微调整

commit 53c6718
Author: noah227 <[email protected]>
Date:   Sun Nov 29 18:38:51 2020 +0800

    most part translated.

commit 27a3372
Author: luism3861 <[email protected]>
Date:   Fri Nov 27 13:10:22 2020 -0600

    update link name in MaskedViewIOS (facebook#2354)

    Co-authored-by: luism3861 <[email protected]>

commit e73993f
Author: Khalid Magdy Khalil <[email protected]>
Date:   Fri Nov 27 21:06:31 2020 +0200

    Update running-on-device.md (facebook#2357)

    * Update running-on-device.md

    Remove the parts that mention xip.io since it's no longer used.
    facebook/react-native@40a8434#diff-0eeea47fa4bace26fa6c492a03fa0ea3923a2d8d54b7894f7760cb9131ab65eb

    * Update running-on-device.md

commit 2f651e4
Author: HenokT <[email protected]>
Date:   Thu Nov 26 19:56:42 2020 +0300

    Minor grammar correction to tutorial.md (facebook#2351)

    * Update tutorial.md

    * Update tutorial.md for version-0.62
  • Loading branch information
@sunnylqm
sunnylqm committed Dec 7, 2020
1 parent f6dbdeb commit 32264eb
Show file tree
Hide file tree
Showing 91 changed files with 2,099 additions and 1,481 deletions.
2 changes: 1 addition & 1 deletion cndocs/intro-react.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export default function CatApp() {

## State 状态

While you can think of props as arguments you use to configure how components render, **state**就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。Sate is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!
如果把props理解为定制组件渲染的参数， 那么**state**就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。状态使组件拥有了记忆！

> 按惯例来说，props用来配置组件的第一次渲染（初始状态）。Use state to keep track of any component data that you expect to change over time. The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.
Expand Down
66 changes: 33 additions & 33 deletions cndocs/pressable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,44 @@ id: pressable
title: Pressable
---

Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
`Pressable` 是一个核心组件的封装，它可以检测到任意子组件的不同阶段的按压交互情况。

```jsx
<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>
```
## How it works
## 原理
On an element wrapped by `Pressable`:
在被 `Pressable` 包装的元素上：
- [`onPressIn`](#onpressin) is called when a press is activated.
- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
- [`onPressIn`](#onpressin) 在按压时被调用。
- [`onPressOut`](#onpressout) 在按压动作结束后被调用。
After pressing [`onPressIn`](#onpressin), one of two things will happen:
在按下 [`onPressIn`](#onpressin) 后，将会出现如下两种情况的一种：
1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
1. 用户移开手指，紧随 [`onPress`](#onpress) 之后触发 [`onPressOut`](#onpressout) 事件。
2. 按压持续500毫秒以上，触发[`onLongPress`](#onlongpress) 事件。([`onPressOut`](#onpressout) 在移开手后依旧会触发。)
<img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
手指的精准度终究不是很精确，人们经常会不小心按错了或者错过了触发区域。为了帮助解决这个问题， `Pressable` 提供了一个可选项 `HitRect` ，可以用来定义相对于包裹元素的有效触发距离。在 `HitRect` 内的任何地方都可以触发按压动作。
`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
`PressRect` 在保持激活状态的同时，允许用户按压时在元素及设定的范围内滑动，使触控更加优雅。试想一下缓慢地滑动着离开按下的按钮。
> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
> 触控区域不会超出绑定的父级view，在按压到重叠的兄弟视图时，z-index更高的那个视图会更优先。
<figure>
<img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
<figcaption>
You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
用 <code>hitSlop</code> 设置 <code>HitRect</code>； 用 <code>pressRetentionOffset</code> 设置 <code>PressRect</code>；
</figcaption>
</figure>
> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347).
> `Pressable` 使用了React Native的 `Pressability` API。查看[Pressability](https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347)示例，获取更多关于Pressability的状态机流程和原理。
## Example
## 示例
```js
import React, { useState } from 'react';
Expand Down Expand Up @@ -107,103 +107,103 @@ export default App;
### `android_disableSound` <div class="label android">Android</div>
If true, doesn't play Android system sound on press.
为true时，按下不会播放Android系统声音。
| Type | Required | Default |
| ------- | -------- | ------- |
| boolean | No | `false` |
### `android_ripple` <div class="label android">Android</div>
Enables the Android ripple effect and configures its properties.
使用并配置Android波纹效果。
| Type | Required |
| -------------------------------------- | -------- |
| [RippleConfig](pressable#rippleconfig) | No |
### `children`
Either children or a function that receives a boolean reflecting whether the component is currently pressed.
接收按压状态布尔值的子节点。
| Type | Required |
| ------------------------ | -------- |
| [React Node](react-node) | No |
### `delayLongPress`
Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
从 `onPressIn` 触发到 `onLongPress` 被调用的时间间隔（毫秒）。
| Type | Required | Default |
| ------ | -------- | ------- |
| number | No | `500` |
### `disabled`
Whether the press behavior is disabled.
是否禁用按压行为。
| Type | Required | Default |
| ------- | -------- | ------- |
| boolean | No | `false` |
### `hitSlop`
Sets additional distance outside of element in which a press can be detected.
设置元素能够检测到按压动作的额外距离。
| Type | Required |
| ---------------------- | -------- |
| [Rect](rect) or number | No |
### `onLongPress`
Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
在 `onPressIn` 持续超过500毫秒后调用。此持续时间可以通过 [`delayLongPress `](#delaylongpress) 自定义。
| Type | Required |
| ------------------------ | -------- |
| [PressEvent](pressevent) | No |
### `onPress`
Called after `onPressOut`.
`onPressOut` 之后调用。
| Type | Required |
| ------------------------ | -------- |
| [PressEvent](pressevent) | No |
### `onPressIn`
Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
在 `onPressOut` 和 `onPress` 之前， 按压后立即调用。
| Type | Required |
| ------------------------ | -------- |
| [PressEvent](pressevent) | No |
### `onPressOut`
Called when a touch is released.
松开手后调用。
| Type | Required |
| ------------------------ | -------- |
| [PressEvent](pressevent) | No |
### `pressRetentionOffset`
Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
在 `onPressOut` 被触发前，view额外的有效触控距离。
| Type | Required | Default |
| ---------------------- | -------- | ---------------------------------------------- |
| [Rect](rect) or number | No | `{ bottom: 30, left: 20, right: 20, top: 20 }` |
### `style`
Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
可使用普通视图样式，或者一个函数来根据按压状态布尔值返回视图样式。
| Type | Required |
| --------------------------------- | -------- |
| [ViewStyleProp](view-style-props) | No |
### `testOnly_pressed`
Used only for documentation or testing (e.g. snapshot testing).
仅用于指导文档或测试 (比如快照测试）。
| Type | Required | Default |
| ------- | -------- | ------- |
Expand All @@ -213,16 +213,16 @@ Used only for documentation or testing (e.g. snapshot testing).
### RippleConfig
Ripple effect configuration for the `android_ripple` property.
`android_ripple` 属性的波纹效果配置。
| Type |
| ------ |
| object |
**Properties:**
| Name | Type | Required | Description |
| ---------- | --------------- | -------- | --------------------------------------------------- |
| color | [color](colors) | No | Defines the color of the ripple effect. |
| borderless | boolean | No | Defines if ripple effect should not include border. |
| radius | number | No | Defines the radius of the ripple effect. |
| Name | Type | Required | Description |
| ---------- | --------------- | -------- | -------------------------- |
| color | [color](colors) | No | 定义波纹的颜色。 |
| borderless | boolean | No | 定义波纹效果是否包含边框。 |
| radius | number | No | 定义波纹的半径。 |
18 changes: 9 additions & 9 deletions cndocs/typescript.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@ title: 使用TypeScript

## Getting Started with TypeScript

If you're starting a new project, there are a few different ways to get started. You can use the [TypeScript template][ts-template]:
如果您要开始一个新项目，则有几种不同的上手方法。 您可以使用[TypeScript模板][ts-template]:

```sh
npx react-native init MyApp --template react-native-template-typescript
```

> **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`.
> **Note** 如果以上命令失败，则可能是您的PC上全局安装了旧版本的`react-native`或`react-native-cli`。 尝试卸载cli并使用`npx`运行cli.
You can use [Expo][expo] which has two TypeScript templates:
您可以使用具有两个TypeScript模板的[Expo][expo]:

```sh
npm install -g expo-cli
expo init MyTSProject
```

Or you could use [Ignite][ignite], which also has a TypeScript template:
或者，您可以使用[Ignite][ignite]，它也具有TypeScript模板:

```sh
npm install -g ignite-cli
Expand All @@ -31,15 +31,15 @@ ignite new MyTSProject

## Adding TypeScript to an Existing Project

1. Add TypeScript and the types for React Native and Jest to your project.
1. 将 TypeScript 以及 React Native 和 Jest 的依赖添加到您的项目中。

```sh
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
# or for npm
npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
```

2. Add a TypeScript config file. Create a `tsconfig.json` in the root of your project:
添加一个 TypeScript 配置文件。 在项目的根目录中创建一个`tsconfig.json`：

```json
{
Expand All @@ -64,7 +64,7 @@ npm install --save-dev typescript @types/jest @types/react @types/react-native @
}
```

3. Create a `jest.config.js` file to configure Jest to use TypeScript
3. 创建一个`jest.config.js`文件来配置Jest以使用 TypeScript:

```js
module.exports = {
Expand All @@ -73,9 +73,9 @@ module.exports = {
};
```

4. Rename a JavaScript file to be `*.tsx`
4. 将JavaScript文件重命名为`* .tsx`:

> You should leave the `./index.js` entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
> 请保留`./index.js`入口文件，否则将在打包生产版本时遇到问题。
5. Run `yarn tsc` to type-check your new TypeScript files.

Expand Down
18 changes: 9 additions & 9 deletions cnwebsite/versioned_docs/version-0.63/intro-react.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,15 +303,15 @@ export default CatApp;

`Image` has [many different props](image#props), including [`style`](image#style), which accepts a JS object of design and layout related property-value pairs.

> Notice the double curly braces `{{ }}` surrounding `style`‘s width and height. In JSX, JavaScript values are referenced with `{}`. This is handy if you are passing something other than a string as props, like an array or number: `<Cat food={["fish", "kibble"]} age={2} />`. However, JS objects are **_also_** denoted with curly braces: `{width: 200, height: 200}`. Therefore, to pass a JS object in JSX, you must wrap the object in **another pair** of curly braces: `{{width: 200, height: 200}}`
> 请留意我们在指定`style`属性的宽高时所用到的双层括号`{{ }}`。在 JSX 中，引用 JS 值时需要使用`{}`括起来。在你需要传递非字符串值（比如数组或者数字）的时候会经常用到这种写法：`<Cat food={["fish", "kibble"]} /> age={2}`。然而我们在 JS 中定义一个对象时，本来**_也_**需要用括号括起来：`{width: 200, height: 200}`。因此要在 JSX 中传递一个 JS 对象值的时候，就必须用到两层括号：`{{width: 200, height: 200}}`。
You can build many things with props and the Core Components [`Text`](text), [`Image`](image), and [`View`](view)! But to build something interactive, you’ll need state.
使用核心组件[`Text`](text), [`Image`](image)以及[`View`](view)搭配 props 已经可以做不少东西了！但是如果想要做一些用户交互，那我们还需要用到状态（state）。

## State

While you can think of props as arguments you use to configure how components render, **state** is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!
如果把 props 理解为定制组件渲染的参数， 那么**state**就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。状态使组件拥有了记忆！

> As a general rule, use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.
> 按惯例来说，props用来配置组件的第一次渲染（初始状态）。Use state to keep track of any component data that you expect to change over time. The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.
The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.

Expand Down Expand Up @@ -379,7 +379,7 @@ Calling `useState` does two things:

It doesn’t matter what names you use. But it can be handy to think of the pattern as `[<getter>, <setter>] = useState(<initialValue>)`.

Next you add the [`Button`](button) Core Component and give it an `onPress` prop:
下面我们添加一个按钮[`Button`](button)组件，并给它一个`onPress`的 prop：

```jsx
<Button
Expand All @@ -390,7 +390,7 @@ Next you add the [`Button`](button) Core Component and give it an `onPress` prop
/>
```

Now, when someone presses the button, `onPress` will fire, calling the `setIsHungry(false)`. This sets the state variable `isHungry` to `false`. When `isHungry` is false, the `Button`’s `disabled` prop is set to `true` and its `title` also changes:
现在当用户点击按钮时，`onPress`函数会被触发，从而调用`setIsHungry(false)`。此时状态变量`isHungry`就被设为了`false`。当`isHungry`为 false 的时候，`Button`的`disabled`属性就变成了`true` ，其`title`也相应变化：

```jsx
<Button
Expand Down Expand Up @@ -477,7 +477,7 @@ export class Cat extends Component {
}
```

As with accessing props with `this.props`, you access this object inside your component with `this.state`:
和使用`this.props`获取 props 一样，在组件中获取状态也是通过`this.state`：

```jsx
<Text>
Expand Down Expand Up @@ -533,8 +533,8 @@ export default Cafe;
</TabItem>
</Tabs>

> See the `<>` and `</>` above? These bits of JSX are [fragments](https://reactjs.org/docs/fragments.html). Adjacent JSX elements must be wrapped in an enclosing tag. Fragments let you do that without nesting an extra, unnecessary wrapping element like `View`.
> 注意到上面的`<>`和`</>`了吗？ 这一对 JSX 标签称为[Fragments（片段）](https://zh-hans.reactjs.org/docs/fragments.html)。由于 JSX 的语法要求根元素必须为单个元素，如果我们需要在根节点处并列多个元素，在这之前就不得不额外套一个没有实际用处的`View`。但有了 Fragment 后就不需要引入额外的容器视图了。
---

Now that you’ve covered both React and React Native’s Core Components, let’s dive deeper on some of these core components by looking at [handling `<TextInput>`](handling-text-input).
现在你应该已经差不多了解 React 和 React Native 的核心组件与思想了。下面可以试着深入学习一些核心组件的用法，比如如何[处理文本输入`<TextInput>`](handling-text-input)。
2 changes: 1 addition & 1 deletion docs/_getting-started-linux-android.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Setting up your development environment can be somewhat tedious if you're new to

<h4>1. Install Android Studio</h4>

[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

- `Android SDK`
- `Android SDK Platform`
Expand Down
2 changes: 1 addition & 1 deletion docs/_getting-started-macos-android.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Setting up your development environment can be somewhat tedious if you're new to

<h4>1. Install Android Studio</h4>

[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

- `Android SDK`
- `Android SDK Platform`
Expand Down
Loading

0 comments on commit 32264eb

Please sign in to comment.