Skip to content

docs(cndocs): 同步更多 React Native 中文文档更新 #1009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sunnylqm merged 6 commits into from
Apr 12, 2026
Merged

docs(cndocs): 同步更多 React Native 中文文档更新 #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b49c9e1
docs(cndocs): 同步已移除日期选择器等文档
sunnylqm Apr 10, 2026
c141038
docs(cndocs): 同步调试与输入相关文档
sunnylqm Apr 10, 2026
163bebd
docs(cndocs): 同步入门与运行时文档
sunnylqm Apr 10, 2026
c54cc40
docs(cndocs): 同步更多资源文档
sunnylqm Apr 10, 2026
2fbf4ac
fix: apply CodeRabbit auto-fixes
coderabbitai[bot] Apr 12, 2026
a0e556e
fix: apply CodeRabbit auto-fixes
coderabbitai[bot] Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 4 additions & 80 deletions cndocs/datepickerandroid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,8 @@
---
id: datepickerandroid
title: 🚧 DatePickerAndroid
title: '❌ DatePickerAndroid'
---

> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.

本组件会打开一个标准的 Android 日期选择器的对话框。

### 示例

```jsx
try {
const {
action,
year,
month,
day
} = await DatePickerAndroid.open({
// 要设置默认值为今天的话，使用`new Date()`即可。
// 下面显示的会是2020年5月25日。月份是从0开始算的。
date: new Date(2020, 4, 25)
});
if (action !== DatePickerAndroid.dismissedAction) {
// 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
}
} catch ({ code, message }) {
console.warn('Cannot open date picker', message);
}
```

### 查看方法

- [`open`](datepickerandroid.md#open)
- [`dateSetAction`](datepickerandroid.md#datesetaction)
- [`dismissedAction`](datepickerandroid.md#dismissedaction)

---

# 文档

## 方法

### `open()`

```jsx
static open(options)
```

打开一个标准的 Android 日期选择器的对话框。

可选的`options`对象的 key 值如下：

- `date` (`Date`对象或毫秒时间戳) - 默认显示的日期
- `minDate` (`Date`对象或毫秒时间戳) - 可选的最小日期
- `maxDate` (`Date`对象或毫秒时间戳) - 可选的最大日期
- `mode` (`enum('calendar', 'spinner', 'default')`) - 设置选择器的模式：
- 'calendar': Show a date picker in calendar mode.
- 'spinner': Show a date picker in spinner mode.
- 'default': Show a default native date picker(spinner/calendar) based on android versions.

在用户选好日期后返回一个 Promise，回调参数为一个对象，其中包含有`action`, `year`, `month` (0-11), `day`。如果用户取消了对话框，Promise 仍然会执行，返回的 action 为`DatePickerAndroid.dismissedAction`，其他几项参数则为 undefined。所以请在使用其他值之前**务必**先检查`action`的值是否为`DatePickerAndroid.dateSetAction`。

Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options.

---

### `dateSetAction()`

```jsx
static dateSetAction()
```

已选中一个日期。

---

### `dismissedAction()`

```jsx
static dismissedAction()
```

对话框已被取消。
:::danger 已从 React Native 移除
请改用[社区包](https://reactnative.directory/?search=datepicker)。
:::
178 changes: 4 additions & 174 deletions cndocs/datepickerios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,178 +1,8 @@
---
id: datepickerios
title: 🚧 DatePickerIOS
title: '❌ DatePickerIOS'
---

> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.

使用`DatePickerIOS`来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听`onDateChange`回调函数并且及时更新`date`属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和`props.date`一致。

### 示例

```
import React, { Component } from 'react'
import {
DatePickerIOS,
View,
StyleSheet,
} from 'react-native'

export default class App extends Component {
constructor(props) {
super(props);
this.state = { chosenDate: new Date() };

this.setDate = this.setDate.bind(this);
}

setDate(newDate) {
this.setState({chosenDate: newDate})
}

render() {
return (
<View style={styles.container}>
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={this.setDate}
/>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
})
```

<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/example.gif" width="360"></img></center>

---

# 文档

## Props

### `date`

当前被选中的日期。

| 类型 | 必需 |
| ---- | ---- |
| Date | 是 |

---

### `onChange`

Date change handler.

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.

| 类型 | Required |
| -------- | -------- |
| function | No |

---

### `onDateChange`

日期/时间变化的监听函数。

当用户修改日期或时间时调用此回调函数。唯一的参数是一个日期对象，表示新的日期和时间。

| 类型 | 必需 |
| -------- | ---- |
| function | 是 |

---

### `maximumDate`

可选的最大日期。

限制可选的日期/时间范围。

| 类型 | 必需 |
| ---- | ---- |
| Date | 否 |

Example with `maximumDate` set to December 31, 2017:

<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/maximumDate.gif" width="360"></img></center>

---

### `minimumDate`

可选的最小日期。

限制可选的日期/时间范围。

| 类型 | 必需 |
| ---- | ---- |
| Date | 否 |

See [`maximumDate`](datepickerios.md#maximumdate) for an example image.

---

### `minuteInterval`

可选的最小的分钟单位。

| 类型 | 必需 |
| ------------------------------------------ | ---- |
| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | 否 |

Example with `minuteInterval` set to `10`:

<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/DatePickerIOS/minuteInterval.png" width="360"></img></center>

---

### `mode`

选择器模式。

| 类型 | Required |
| --------------------------------------------- | -------- |
| enum('date', 'time', 'datetime', 'countdown') | No |

Example with `mode` set to `date`, `time`, and `datetime`: ![](assets/DatePickerIOS/mode.png)

---

### `locale`

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).

| 类型 | 必需 |
| ------ | ---- |
| String | 否 |

---

### `timeZoneOffsetInMinutes`

时区差，单位是分钟。

默认情况下，选择器会选择设备的默认时区。通过此参数，可以指定一个时区。举个例子，要使用北京时间（东八区），可以传递 8 \* 60。

| 类型 | 必需 |
| ------ | ---- |
| number | 否 |

---

### `initialDate`

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.

| 类型 | Required |
| ---- | -------- |
| Date | No |
:::danger 已从 React Native 中移除
请改用[社区包](https://reactnative.directory/?search=datepicker)。
:::
Loading