react-native-picker选择器

最新推荐文章于 2024-08-09 08:11:56 发布

原创最新推荐文章于 2024-08-09 08:11:56 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

react native 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在react-native项目中使用react-native-picker组件来创建一个多级选择器的功能，包括安装步骤和基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: react-native-picker选择器
tags:

选择器
react-native-picker
picker

react-native-picker选择器说明

这是一个多级选择器

安装

 npm install react-native-picker --save

  // 选择城市
  pickerShow = () => {
    let data = [
      {
        a: [
          {
            a1: [1, 2, 3, 4],
          },
          {
            a2: [5, 6, 7, 8],
          },
          {
            a3: [9, 10, 11, 12],
          },
        ],
      },
      {
        b: [
          {
            b1: [11, 22, 33, 44],
          },
          {
            b2: [55, 66, 77, 88],
          },
          {
            b3: [99, 1010, 1111, 1212],
          },
        ],
      },
      {
        c: [
          {
            c1: ['a', 'b', 'c'],
          },
          {
            c2: ['aa', 'bb', 'cc'],
          },
          {
            c3: ['aaa', 'bbb', 'ccc'],
          },
        ],
      },
    ];

    Picker.init({
      pickerConfirmBtnText: '确认',
      pickerCancelBtnText: '取消',
      pickerTitleText: '选择',
      pickerData: CitysJson,
      // selectedValue: [59],
      onPickerConfirm: (data) => {
        console.log(data);
      },
      onPickerCancel: (data) => {
        console.log(data);
      },
      onPickerSelect: (data) => {
        console.log(data);
      },
    });
    Picker.show();
  };