Skip to content

Commit 67d7cef

Browse files
sunnylqmsunnylqm
authored
docs(cndocs): 同步翻译更新（高质量） (#1002)
1 parent 2e2f64d commit 67d7cef

11 files changed

Lines changed: 1951 additions & 1035 deletions

‎cndocs/components-and-apis.md‎

Lines changed: 167 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -3,159 +3,211 @@ id: components-and-apis
33
title: 核心组件和API
44
---
55

6-
React Native 提供了一些内置的[核心组件](intro-react-native-components)供你使用。你可以在网站的左侧看到组件的完整列表。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类：
6+
React Native 提供了一些内置的[核心组件](intro-react-native-components)供你使用。你可以在左侧的导航栏中找到所有组件的完整列表（如果你在窄屏设备上，请查看上方的菜单）。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类：
77

88
- [基础组件](components-and-apis#基础组件)
99
- [交互控件](components-and-apis#交互控件)
1010
- [列表视图](components-and-apis#列表视图)
11-
- [iOS 独有组件](components-and-apis#iOS独有的组件和API)
12-
- [Android 独有组件](components-and-apis#Android独有的组件和API)
11+
- [Android 独有组件](components-and-apis#android-独有的组件和-api)
12+
- [iOS 独有组件](components-and-apis#ios-独有的组件和-api)
1313
- [其他](components-and-apis#其他)
1414

15-
需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有`react native`关键字的大量的第三方组件。
15+
需要说明的是，你不会被局限在这些内置组件上。React Native 有一个由数千名开发者组成的庞大社区。如果你正在寻找某个特定功能的库，请参阅[查找第三方库](libraries#finding-libraries)的指南。
1616

1717
## 基础组件
1818

19-
大多数应用都会用到这里的基础组件。如果你是新手的话，那更应该先好好熟悉一下这些组件：
20-
21-
<div class="component-grid component-grid-border">
22-
<div class="component">
23-
<h3><a href="view">View</a></h3>
24-
<p>搭建用户界面的最基础组件。</p>
25-
</div>
26-
<div class="component">
27-
<h3><a href="text">Text</a></h3>
28-
<p>显示文本内容的组件。</p>
29-
</div>
30-
<div class="component">
31-
<h3><a href="image">Image</a></h3>
32-
<p>显示图片内容的组件。</p>
33-
</div>
34-
<div class="component">
35-
<h3><a href="textinput">TextInput</a></h3>
36-
<p>文本输入框。</p>
37-
</div>
38-
<div class="component">
39-
<h3><a href="scrollview">ScrollView</a></h3>
40-
<p>可滚动的容器视图。</p>
41-
</div>
42-
<div class="component">
43-
<h3><a href="stylesheet">StyleSheet</a></h3>
44-
<p>提供类似CSS样式表的样式抽象层。</p>
19+
大多数应用都会用到这里的基础组件。
20+
21+
<div className="component-grid component-grid-border">
22+
<div className="component">
23+
<a href="./view">
24+
<h3>View</h3>
25+
<p>搭建用户界面的最基础组件。</p>
26+
</a>
27+
</div>
28+
<div className="component">
29+
<a href="./text">
30+
<h3>Text</h3>
31+
<p>显示文本内容的组件。</p>
32+
</a>
33+
</div>
34+
<div className="component">
35+
<a href="./image">
36+
<h3>Image</h3>
37+
<p>显示图片内容的组件。</p>
38+
</a>
39+
</div>
40+
<div className="component">
41+
<a href="./textinput">
42+
<h3>TextInput</h3>
43+
<p>通过键盘向应用输入文本的组件。</p>
44+
</a>
45+
</div>
46+
<div className="component">
47+
<a href="./pressable">
48+
<h3>Pressable</h3>
49+
<p>一个包装组件，可以检测其任何子组件上的各种按压交互阶段。</p>
50+
</a>
51+
</div>
52+
<div className="component">
53+
<a href="./scrollview">
54+
<h3>ScrollView</h3>
55+
<p>可滚动的容器视图，可以承载多个组件和视图。</p>
56+
</a>
57+
</div>
58+
<div className="component">
59+
<a href="./stylesheet">
60+
<h3>StyleSheet</h3>
61+
<p>提供类似 CSS 样式表的样式抽象层。</p>
62+
</a>
4563
</div>
4664
</div>
4765

4866
## 交互控件
4967

5068
提供一些常见的跨平台的交互控件。
5169

52-
<div class="component-grid component-grid-border">
53-
<div class="component">
54-
<h3><a href="button">Button</a></h3>
55-
<p>一个简单的跨平台的按钮控件。</p>
70+
<div className="component-grid component-grid-border">
71+
<div className="component">
72+
<a href="./button">
73+
<h3>Button</h3>
74+
<p>一个简单的跨平台的按钮控件，在所有平台上都能良好渲染。</p>
75+
</a>
5676
</div>
57-
<div class="component">
58-
<h3><a href="switch">Switch</a></h3>
59-
<p>开关控件。</p>
77+
<div className="component">
78+
<a href="./switch">
79+
<h3>Switch</h3>
80+
<p>布尔值输入控件。</p>
81+
</a>
6082
</div>
6183
</div>
6284

6385
## 列表视图
6486

65-
和一般化用途的`ScrollView`不同，下面的列表组件只会渲染当前屏幕可见的元素，这样有利于显示大量的数据。
87+
和一般化用途的[`ScrollView`](./scrollview)不同，下面的列表组件只会渲染当前屏幕可见的元素，这样有利于显示大量的数据。
6688

67-
<div class="component-grid component-grid-border">
68-
<div class="component">
69-
<h3><a href="flatlist">FlatList</a></h3>
70-
<p>高性能的滚动列表组件。</p>
89+
<div className="component-grid component-grid-border">
90+
<div className="component">
91+
<a href="./flatlist">
92+
<h3>FlatList</h3>
93+
<p>高性能的滚动列表组件。</p>
94+
</a>
7195
</div>
72-
<div class="component">
73-
<h3><a href="sectionlist">SectionList</a></h3>
74-
<p>类似<code>FlatList</code>，但是多了分组显示。</p>
96+
<div className="component">
97+
<a href="./sectionlist">
98+
<h3>SectionList</h3>
99+
<p>类似<code>FlatList</code>，但是多了分组显示。</p>
100+
</a>
75101
</div>
76102
</div>
77103

78-
## iOS 独有的组件和 API
104+
## Android 独有的组件和 API
79105

80-
下面的组件都是对常用的 UIKit 类的封装。
106+
下面的组件提供了对 Android 常用类的封装。
81107

82-
<div class="component-grid component-grid-border">
83-
<div class="component">
84-
<h3><a href="actionsheetios">ActionSheetIOS</a></h3>
85-
<p>从设备底部弹出一个显示一个ActionSheet弹出框选项菜单或分享菜单。</p>
108+
<div className="component-grid component-grid-border">
109+
<div className="component">
110+
<a href="./backhandler">
111+
<h3>BackHandler</h3>
112+
<p>监听并处理设备上的返回按钮。</p>
113+
</a>
114+
</div>
115+
<div className="component">
116+
<a href="./drawerlayoutandroid">
117+
<h3>DrawerLayoutAndroid</h3>
118+
<p>渲染一个<code>DrawerLayout</code>抽屉布局。</p>
119+
</a>
120+
</div>
121+
<div className="component">
122+
<a href="./permissionsandroid">
123+
<h3>PermissionsAndroid</h3>
124+
<p>对 Android M 引入的权限模型的封装。</p>
125+
</a>
126+
</div>
127+
<div className="component">
128+
<a href="./toastandroid">
129+
<h3>ToastAndroid</h3>
130+
<p>弹出一个 Android Toast 提示。</p>
131+
</a>
86132
</div>
87133
</div>
88134

89-
## Android 独有的组件和 API
135+
## iOS 独有的组件和 API
90136

91-
下面的组件提供了对 Android 常用类的封装。
137+
下面的组件都是对常用的 UIKit 类的封装。
92138

93-
<div class="component-grid component-grid-border">
94-
<div class="component">
95-
<h3><a href="backhandler">BackHandler</a></h3>
96-
<p>监听并处理设备上的返回按钮。</p>
97-
</div>
98-
<div class="component">
99-
<h3><a href="drawerlayoutandroid">DrawerLayoutAndroid</a></h3>
100-
<p>渲染一个<code>DrawerLayout</code>抽屉布局。</p>
101-
</div>
102-
<div class="component">
103-
<h3><a href="permissionsandroid">PermissionsAndroid</a></h3>
104-
<p>对Android 6.0引入的权限模型的封装。</p>
105-
</div>
106-
<div class="component">
107-
<h3><a href="toastandroid">ToastAndroid</a></h3>
108-
<p>弹出一个Toast提示框。</p>
139+
<div className="component-grid component-grid-border">
140+
<div className="component">
141+
<a href="./actionsheetios">
142+
<h3>ActionSheetIOS</h3>
143+
<p>用于显示 iOS 操作表或分享菜单的 API。</p>
144+
</a>
109145
</div>
110146
</div>
111147

112148
## 其他
113149

114-
下面的组件可能适用于一些特定场景。
115-
116-
<div class="component-grid">
117-
<div class="component">
118-
<h3><a href="activityindicator">ActivityIndicator</a></h3>
119-
<p>显示一个圆形的正在加载的符号。</p>
120-
</div>
121-
<div class="component">
122-
<h3><a href="alert">Alert</a></h3>
123-
<p>弹出一个提示框，显示指定的标题和信息。</p>
124-
</div>
125-
<div class="component">
126-
<h3><a href="animated">Animated</a></h3>
127-
<p>易于使用和维护的动画库，可生成流畅而强大的动画。</p>
128-
</div>
129-
<div class="component">
130-
<h3><a href="dimensions">Dimensions</a></h3>
131-
<p>获取设备尺寸。</p>
132-
</div>
133-
<div class="component">
134-
<h3><a href="keyboardavoidingview">KeyboardAvoidingView</a></h3>
135-
<p>一种视图容器，可以随键盘升起而自动移动。</p>
136-
</div>
137-
<div class="component">
138-
<h3><a href="linking">Linking</a></h3>
139-
<p>提供了一个通用的接口来调起其他应用或被其他应用调起。</p>
140-
</div>
141-
<div class="component">
142-
<h3><a href="modal">Modal</a></h3>
143-
<p>一种简单的覆盖全屏的模态视图。</p>
144-
</div>
145-
<div class="component">
146-
<h3><a href="pixelratio">PixelRatio</a></h3>
147-
<p>可以获取设备的像素密度。</p>
148-
</div>
149-
<div class="component">
150-
<h3><a href="refreshcontrol">RefreshControl</a></h3>
151-
<p>此组件用在<code>ScrollView</code>及其衍生组件的内部，用于添加下拉刷新的功能。</p>
152-
</div>
153-
<div class="component">
154-
<h3><a href="statusbar">StatusBar</a></h3>
155-
<p>用于控制应用顶部状态栏样式的组件。</p>
156-
</div>
157-
<div class="component">
158-
<h3><a href="webview">WebView</a></h3>
159-
<p>在原生视图中显示Web内容的组件。</p>
150+
下面的组件可能适用于一些特定场景。如需完整的组件和 API 列表，请查看左侧的导航栏（窄屏上请查看上方菜单）。
151+
152+
<div className="component-grid">
153+
<div className="component">
154+
<a href="./activityindicator">
155+
<h3>ActivityIndicator</h3>
156+
<p>显示一个圆形的正在加载的指示器。</p>
157+
</a>
158+
</div>
159+
<div className="component">
160+
<a href="./alert">
161+
<h3>Alert</h3>
162+
<p>弹出一个提示框，显示指定的标题和信息。</p>
163+
</a>
164+
</div>
165+
<div className="component">
166+
<a href="./animated">
167+
<h3>Animated</h3>
168+
<p>易于构建和维护的动画库，可生成流畅而强大的动画。</p>
169+
</a>
170+
</div>
171+
<div className="component">
172+
<a href="./dimensions">
173+
<h3>Dimensions</h3>
174+
<p>获取设备尺寸的接口。</p>
175+
</a>
176+
</div>
177+
<div className="component">
178+
<a href="./keyboardavoidingview">
179+
<h3>KeyboardAvoidingView</h3>
180+
<p>一种视图容器，可以随虚拟键盘弹出而自动调整位置。</p>
181+
</a>
182+
</div>
183+
<div className="component">
184+
<a href="./linking">
185+
<h3>Linking</h3>
186+
<p>提供了一个通用的接口来与传入和传出的应用链接进行交互。</p>
187+
</a>
188+
</div>
189+
<div className="component">
190+
<a href="./modal">
191+
<h3>Modal</h3>
192+
<p>一种简单的在视图之上展示内容的方式。</p>
193+
</a>
194+
</div>
195+
<div className="component">
196+
<a href="./pixelratio">
197+
<h3>PixelRatio</h3>
198+
<p>获取设备的像素密度。</p>
199+
</a>
200+
</div>
201+
<div className="component">
202+
<a href="./refreshcontrol">
203+
<h3>RefreshControl</h3>
204+
<p>此组件用在<code>ScrollView</code>内部，用于添加下拉刷新功能。</p>
205+
</a>
206+
</div>
207+
<div className="component">
208+
<a href="./statusbar">
209+
<h3>StatusBar</h3>
210+
<p>用于控制应用顶部状态栏样式的组件。</p>
211+
</a>
160212
</div>
161213
</div>

0 commit comments

Comments
 (0)