React-Native Android Dialog Picker介绍

React-Native Android Dialog Picker是一个React Native模块，用于提供一个Android风格的下拉选择器。该模块使用PickerDialog和ListDialog的组合来实现下拉选择器。可以很方便地安装和使用。

安装

在终端中运行以下命令：

npm install react-native-android-dialog-picker --save

使用

导入模块：

import DialogAndroid from 'react-native-android-dialog-picker';

打开列表选择器：

DialogAndroid.showPicker('选择颜色', null, {
    positiveText: '确定',
    negativeText: '取消',
    items: [
        '红色',
        '绿色',
        '蓝色',
        '黄色',
        '黑色',
        '白色',
    ],
    itemsCallback: (index, item) => {
        console.log(index, item);
    },
});

打开选择器：

const options = {
    date: new Date(),
    minDate: new Date(1900, 0, 1),
    maxDate: new Date(),
};

DialogAndroid.datePicker(options, (action, year, month, day) => {
    if (action !== DialogAndroid.dismissedAction) {
        console.log(year, month, day);
    } else {
        console.log('取消');
    }
});

Props

| Prop | Type | Description | | --- | --- | --- | | items | array | 选择项的数组。 | | itemsCallback | method | 选择项回调方法。 | | title | string | 对话框标题。 | | positiveText | string | “确定”按钮文本。 | | negativeText | string | “取消”按钮文本。 | | date | date | 日期选择器的日期。 | | minDate | date | 可选择的最小日期。 | | maxDate | date | 可选择的最大日期。 | | mode | string | 选择器的模式（“date”或“time”）。 |

示例

下面是一些使用上面提到的方法的JavaScript代码示例。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import DialogAndroid from 'react-native-android-dialog-picker';

export default class App extends Component {
  state = {
    picked: '',
    selectedDate: ''
  }

  showPicker(isList) {
    if (isList) {
      DialogAndroid.showPicker('选择颜色', null, {
        positiveText: '确定',
        negativeText: '取消',
        items: [
          '红色',
          '绿色',
          '蓝色',
          '黄色',
          '黑色',
          '白色',
        ],
        itemsCallback: (index, item) => {
          this.setState({ picked: item });
        },
      });
    } else {
      const options = {
        date: new Date(),
        minDate: new Date(1900, 0, 1),
        maxDate: new Date(),
      };
      DialogAndroid.datePicker(options, (action, year, month, day) => {
        if (action !== DialogAndroid.dismissedAction) {
          const date = `${year}-${month+1}-${day}`;
          this.setState({ selectedDate: date });
        } else {
          console.log('取消');
        }
      });
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => {this.showPicker(true)}}
        >
          <Text>打开列表选择器</Text>
        </TouchableOpacity>
        <Text>{this.state.picked}</Text>
        <TouchableOpacity
          onPress={() => {this.showPicker(false)}}
        >
          <Text>打开日期选择器</Text>
        </TouchableOpacity>
        <Text>{this.state.selectedDate}</Text>
      </View>
    );
  }
}

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

以上就是React-Native Android Dialog Picker的使用介绍。该模块可以很好地满足一些需要Android风格下拉选择器的React Native项目需求。