模板版本：v0.2.2

react-native-pickers

安装与使用

三方库版本	支持RN版本
2.0.0	0.72/0.77

进入到工程目录并输入以下命令：

npm

npm install react-native-pickers@2.0.0

yarn

yarn add react-native-pickers@2.0.0

下面的代码展示了这个库的基本使用场景：

import { View, Text, TouchableOpacity } from "react-native";
import { BaseComponent, AreaPicker, DatePicker } from "react-native-pickers";

var AreaJson = [
  {
    name: "香港",
    city: [{ name: "香港", area: ["中西區", "灣仔區", "東區", "南區"] }],
  },
  {
    name: "台灣",
    city: [
      {
        name: "台灣",
        area: ["臺北市", "高雄市", "臺北縣", "桃園縣", "新竹縣"],
      },
    ],
  },
  {
    name: "澳門",
    city: [
      {
        name: "澳門",
        area: ["花地瑪堂區", "聖安多尼堂區", "大堂區", "望德堂區"],
      },
    ],
  },
];

export default class MainPage extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      unit: ["年", "月", "日"],
      startYear: 1900,
      active: false,
      modalVisible: false,
    };
  }

  renderButton(text, callback) {
    return (
      <TouchableOpacity
        onPress={callback.bind(this)}
        style={{
          width: this.getSize(180),
          height: this.getSize(35),
          justifyContent: "center",
          alignItems: "center",
          borderColor: "#999999",
          borderWidth: this.mOnePixel,
          padding: this.getSize(10),
          backgroundColor: "#cccccc",
          borderRadius: this.getSize(4),
          marginBottom: this.getSize(20),
        }}
      >
        <Text>{text}</Text>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View
        style={{
          width: this.mScreenWidth,
          height: this.mScreenHeight,
          backgroundColor: "#f9fafb",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{
            width: this.mScreenWidth,
            height: 60,
            backgroundColor: 0x00000030,
          }}
        />
        <View
          style={{
            flex: 1,
            width: this.mScreenWidth,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          {this.renderButton("行政区域picker", () => {
            this.AreaPicker.show();
          })}
          {this.renderButton("DatePicker", () => {
            this.DatePicker.show();
          })}
          <AreaPicker
            areaJson={AreaJson}
            onPickerCancel={() => {}}
            onPickerConfirm={(value) => {
              alert(JSON.stringify(value));
            }}
            ref={(ref) => (this.AreaPicker = ref)}
          />
          <DatePicker
            unit={this.state.unit}
            startYear={this.state.startYear}
            onPickerConfirm={(value) => {
              alert(JSON.stringify(value));
            }}
            onPickerCancel={() => {
              alert("cancel");
            }}
            ref={(ref) => (this.DatePicker = ref)}
          />
        </View>
      </View>
    );
  }
}

Link

本库依赖@react-native-ohos/react-native-svg，如已在鸿蒙工程中引入过该库，则无需再次引入。

如未引入请参照@react-native-ohos/react-native-svg 文档的 Link 章节进行引入

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25;
2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107;

属性

AlertDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
messageText	消息文本	string	no	All	yes
messageTextColor	消息文本字体颜色	string	no	All	yes
messageTextSize	消息文本字体大小	number	no	All	yes
negativeText	取消文本	string	no	All	yes
negativeColor	取消文本颜色	string	no	All	yes
negativeSize	取消文本字体大小	number	no	All	yes
positiveText	确定文本	string	no	All	yes
positiveColor	确定文本颜色	string	no	All	yes
positiveSize	确定文本字体大小	number	no	All	yes
onPress	positive(确定)返回true or negative(取消)返回false	function	no	All	yes

AreaPicker

Name	Description	Type	Required	Platform	HarmonyOS Support
selectedValue	选中	Arrays<string|object>	no	All	yes
areaJson	地址数据源	json	no	All	yes
confirmText	确定选择文本	string	no	All	yes
confirmTextSize	确定选择文本字体大小	number	no	All	yes
confirmTextColor	确定选择字体颜色	string	no	All	yes
cancelText	取消选择文本	string	no	All	yes
cancelTextSize	取消选择文本字体大小	number	no	All	yes
cancelTextColor	取消选择文本字体颜色	string	no	All	yes
itemTextColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
itemSelectedColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
itemHeight	item 高度	string	no	All	yes
onPickerCancel	取消选择回调	function	no	All	yes
onPickerConfirm	确认选择回调	function	no	All	yes

DatePicker

Name	Description	Type	Required	Platform	HarmonyOS Support
itemTextColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
itemSelectedColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
onPickerCancel	取消选择回调	function	no	All	yes
onPickerConfirm	确认选择回调	function	no	All	yes
unit	单位	Arrays<string|object>	no	All	yes
selectedValue	选中	string	no	All	yes
startYear	起始年份	number	no	All	yes
endYear	截至年份	number	no	All	yes
confirmText	确定选择文本	string	no	All	yes
confirmTextSize	确定选择文本字体大小	number	no	All	yes
confirmTextColor	确定选择文本字体颜色	string	no	All	yes
cancelText	取消选择文本	string	no	All	yes
cancelTextSize	取消选择文本字体大小	number	no	All	yes
cancelTextColor	取消选择文本字体颜色	string	no	All	yes
itemHeight	item 高度	number	no	All	yes
HH	是否显示小时	boolean	no	All	yes
mm	是否显示分钟	boolean	no	All	yes
ss	是否显示秒	boolean	no	All	yes

DownloadDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
title	标题文本	string	no	All	yes
titleColor	标题文本字体大小	string	no	All	yes
titleSize	标题文本文本颜色	number	no	All	yes
active	按钮是否可点击	string	no	All	yes
actionText	按钮文本	string	no	All	yes
onAction	点击按钮回调	function	no	All	yes
totalTextColor	总数文本字体颜色	string	no	All	yes
totalTextSize	总数文本字体大小	number	no	All	yes

InputDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
title	标题文本	string	no	All	yes
titleSize	标题文本字体大小	number	no	All	yes
titleColor	标题文本文本颜色	string	no	All	yes
cancelText	取消文本	string	no	All	yes
cancelSize	取消文本字体大小	number	no	All	yes
cancelColor	取消文本字体颜色	string	no	All	yes
btnText	提交文本	string	no	All	yes
btnTextSize	提交文本字体大小	number	no	All	yes
btnTextColor	提交文本字体颜色	string	no	All	yes
btnBgColor	提交按钮颜色	string	no	All	yes
placeholder	输入框提示语	string	no	All	yes
onSubmit	返回输入的文本内容	function	no	All	yes

BaseDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
removeSubviews	dismiss，是否回收前景控件，拓展出来的子控件，不要动态设置改属性	boolean	no	All	yes
coverClickable	背景点击隐藏	boolean	no	All	yes
onCoverPress	点击背景，dismiss 回调	function	no	All	yes
showAnimationType	入场动画方式 spring timing	function	no	All	yes

PickerView

Name	Description	Type	Required	Platform	HarmonyOS Support
itemTextColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
itemSelectedColor	item 正常颜色，仅支持 16进制数字	string	no	All	yes
itemHeight	item 高度	number	no	All	yes
onPickerSelected	选中时回调	function	no	All	yes
selectedIndex	选中	number	no	All	yes

SimpleChooseDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
items	列表数据，可以 string、object (需要指定 itemKey)	Arrays<string|object>	no	All	yes
itemKey	当 item 为 object 时，来指定显示的属性 items:[{id:0, value: 'v1'},{id:0, value: 'v1'}]itemKey 设为'value',则等同于['v1', 'v2']	string	no	All	yes
itemStyle	列表文字样式	object	no	All	yes
selectColor	选中颜色	string	no	All	yes
normalColor	未选中颜色	string	no	All	yes
pointSize	左侧选中标识大小	number	no	All	yes
pointBorderRadius	左侧选中标识边框弧度	string	no	All	yes
confirmText	确定选择文本	string	no	All	yes
confirmBtnColor	确定选择按钮颜色	string	no	All	yes
confirmTextColor	确定选择文本颜色	string	no	All	yes
onPress	返回选中 index	function	no	All	yes

SimpleItemsDialog

Name	Description	Type	Required	Platform	HarmonyOS Support
items	列表数据，可以 string、object(需要指定 itemKey)	Arrays<string|object>	no	All	yes
itemKey	当 item 为 object 时，来指定显示的属性 items:[{id:0, value: 'v1'},{id:0, value: 'v1'}] itemKey 设为'value',则等同于['v1', 'v2']	string	no	All	yes
itemStyle	列表文字样式	object	no	All	yes
onPress	返回选中 index	function	no	All	yes
cancel	是否在列表最后 增加 ‘取消’ 项	string	no	All	yes
cancelText	取消项文本	string	no	All	yes
cancelTextStyle	取消文本字体样式	object	no	All	yes

ToastComponent

Name	Description	Type	Required	Platform	HarmonyOS Support
duration	显示时长（自动隐藏）	number	no	All	yes
textColor	message 字体颜色	string	no	All	yes
fontSize	message 字体大小	number	no	All	yes
lineHeight	message 字体行高	number	no	All	yes
paddingH	水平 padding	number	no	All	yes
paddingV	上下 padding	number	no	All	yes
borderRadius	背景圆角	number	no	All	yes
backgroundColor	背景颜色	string	no	All	yes

遗留问题

其他

开源协议

本项目基于 The ISC License (ISC) ，请自由地享受和参与开源。