Skip to content

Commit 9392209

Browse files
sunnylqmcoderabbitai[bot]CodeRabbit
authored
docs(cndocs): 同步更多 React Native 中文文档更新 (#1009)
* docs(cndocs): 同步已移除日期选择器等文档 * docs(cndocs): 同步调试与输入相关文档 * docs(cndocs): 同步入门与运行时文档 * docs(cndocs): 同步更多资源文档 * fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai> * fix: apply CodeRabbit auto-fixes Fixed 2 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
1 parent 769e14c commit 9392209

11 files changed

+179
-489
lines changed

‎cndocs/datepickerandroid.md‎

Lines changed: 4 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,8 @@
11
---
22
id: datepickerandroid
3-
title: 🚧 DatePickerAndroid
3+
title: '❌ DatePickerAndroid'
44
---
55

6-
> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
7-
8-
本组件会打开一个标准的 Android 日期选择器的对话框。
9-
10-
### 示例
11-
12-
```jsx
13-
try {
14-
const {
15-
action,
16-
year,
17-
month,
18-
day
19-
} = await DatePickerAndroid.open({
20-
// 要设置默认值为今天的话，使用`new Date()`即可。
21-
// 下面显示的会是2020年5月25日。月份是从0开始算的。
22-
date: new Date(2020, 4, 25)
23-
});
24-
if (action !== DatePickerAndroid.dismissedAction) {
25-
// 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
26-
}
27-
} catch ({ code, message }) {
28-
console.warn('Cannot open date picker', message);
29-
}
30-
```
31-
32-
### 查看方法
33-
34-
- [`open`](datepickerandroid.md#open)
35-
- [`dateSetAction`](datepickerandroid.md#datesetaction)
36-
- [`dismissedAction`](datepickerandroid.md#dismissedaction)
37-
38-
---
39-
40-
# 文档
41-
42-
## 方法
43-
44-
### `open()`
45-
46-
```jsx
47-
static open(options)
48-
```
49-
50-
打开一个标准的 Android 日期选择器的对话框。
51-
52-
可选的`options`对象的 key 值如下：
53-
54-
- `date` (`Date`对象或毫秒时间戳) - 默认显示的日期
55-
- `minDate` (`Date`对象或毫秒时间戳) - 可选的最小日期
56-
- `maxDate` (`Date`对象或毫秒时间戳) - 可选的最大日期
57-
- `mode` (`enum('calendar', 'spinner', 'default')`) - 设置选择器的模式：
58-
- 'calendar': Show a date picker in calendar mode.
59-
- 'spinner': Show a date picker in spinner mode.
60-
- 'default': Show a default native date picker(spinner/calendar) based on android versions.
61-
62-
在用户选好日期后返回一个 Promise，回调参数为一个对象，其中包含有`action`, `year`, `month` (0-11), `day`。如果用户取消了对话框，Promise 仍然会执行，返回的 action 为`DatePickerAndroid.dismissedAction`，其他几项参数则为 undefined。所以请在使用其他值之前**务必**先检查`action`的值是否为`DatePickerAndroid.dateSetAction`。
63-
64-
Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options.
65-
66-
---
67-
68-
### `dateSetAction()`
69-
70-
```jsx
71-
static dateSetAction()
72-
```
73-
74-
已选中一个日期。
75-
76-
---
77-
78-
### `dismissedAction()`
79-
80-
```jsx
81-
static dismissedAction()
82-
```
83-
84-
对话框已被取消。
6+
:::danger 已从 React Native 移除
7+
请改用[社区包](https://reactnative.directory/?search=datepicker)。
8+
:::

‎cndocs/datepickerios.md‎

Lines changed: 4 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,8 @@
11
---
22
id: datepickerios
3-
title: 🚧 DatePickerIOS
3+
title: '❌ DatePickerIOS'
44
---
55

6-
> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
7-
8-
使用`DatePickerIOS`来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听`onDateChange`回调函数并且及时更新`date`属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和`props.date`一致。
9-
10-
### 示例
11-
12-
```
13-
import React, { Component } from 'react'
14-
import {
15-
DatePickerIOS,
16-
View,
17-
StyleSheet,
18-
} from 'react-native'
19-
20-
export default class App extends Component {
21-
constructor(props) {
22-
super(props);
23-
this.state = { chosenDate: new Date() };
24-
25-
this.setDate = this.setDate.bind(this);
26-
}
27-
28-
setDate(newDate) {
29-
this.setState({chosenDate: newDate})
30-
}
31-
32-
render() {
33-
return (
34-
<View style={styles.container}>
35-
<DatePickerIOS
36-
date={this.state.chosenDate}
37-
onDateChange={this.setDate}
38-
/>
39-
</View>
40-
)
41-
}
42-
}
43-
44-
const styles = StyleSheet.create({
45-
container: {
46-
flex: 1,
47-
justifyContent: 'center'
48-
},
49-
})
50-
```
51-
52-
<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/example.gif" width="360"></img></center>
53-
54-
---
55-
56-
# 文档
57-
58-
## Props
59-
60-
### `date`
61-
62-
当前被选中的日期。
63-
64-
| 类型 | 必需 |
65-
| ---- | ---- |
66-
| Date | 是 |
67-
68-
---
69-
70-
### `onChange`
71-
72-
Date change handler.
73-
74-
This is called when the user changes the date or time in the UI. The first and only argument is an Event. For getting the date the picker was changed to, use onDateChange instead.
75-
76-
| 类型 | Required |
77-
| -------- | -------- |
78-
| function | No |
79-
80-
---
81-
82-
### `onDateChange`
83-
84-
日期/时间变化的监听函数。
85-
86-
当用户修改日期或时间时调用此回调函数。唯一的参数是一个日期对象，表示新的日期和时间。
87-
88-
| 类型 | 必需 |
89-
| -------- | ---- |
90-
| function | 是 |
91-
92-
---
93-
94-
### `maximumDate`
95-
96-
可选的最大日期。
97-
98-
限制可选的日期/时间范围。
99-
100-
| 类型 | 必需 |
101-
| ---- | ---- |
102-
| Date | 否 |
103-
104-
Example with `maximumDate` set to December 31, 2017:
105-
106-
<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/maximumDate.gif" width="360"></img></center>
107-
108-
---
109-
110-
### `minimumDate`
111-
112-
可选的最小日期。
113-
114-
限制可选的日期/时间范围。
115-
116-
| 类型 | 必需 |
117-
| ---- | ---- |
118-
| Date | 否 |
119-
120-
See [`maximumDate`](datepickerios.md#maximumdate) for an example image.
121-
122-
---
123-
124-
### `minuteInterval`
125-
126-
可选的最小的分钟单位。
127-
128-
| 类型 | 必需 |
129-
| ------------------------------------------ | ---- |
130-
| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | 否 |
131-
132-
Example with `minuteInterval` set to `10`:
133-
134-
<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/minuteInterval.png" width="360"></img></center>
135-
136-
---
137-
138-
### `mode`
139-
140-
选择器模式。
141-
142-
| 类型 | Required |
143-
| --------------------------------------------- | -------- |
144-
| enum('date', 'time', 'datetime', 'countdown') | No |
145-
146-
Example with `mode` set to `date`, `time`, and `datetime`: ![](assets/DatePickerIOS/mode.png)
147-
148-
---
149-
150-
### `locale`
151-
152-
The locale for the date picker. Value needs to be a [Locale ID](https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html).
153-
154-
| 类型 | 必需 |
155-
| ------ | ---- |
156-
| String | 否 |
157-
158-
---
159-
160-
### `timeZoneOffsetInMinutes`
161-
162-
时区差，单位是分钟。
163-
164-
默认情况下，选择器会选择设备的默认时区。通过此参数，可以指定一个时区。举个例子，要使用北京时间（东八区），可以传递 8 \* 60。
165-
166-
| 类型 | 必需 |
167-
| ------ | ---- |
168-
| number | 否 |
169-
170-
---
171-
172-
### `initialDate`
173-
174-
Provides an initial value that will change when the user starts selecting a date. It is useful for simple use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth.
175-
176-
| 类型 | Required |
177-
| ---- | -------- |
178-
| Date | No |
6+
:::danger 已从 React Native 中移除
7+
请改用[社区包](https://reactnative.directory/?search=datepicker)。
8+
:::

0 commit comments

Comments
 (0)