React Native Sectioned Multi Select 使用教程

最新推荐文章于 2024-09-26 07:39:41 发布

汪萌娅Gloria

最新推荐文章于 2024-09-26 07:39:41 发布

阅读量807

点赞数 20

本文链接：https://blog.csdn.net/gitblog_01152/article/details/142538596

版权

React Native Sectioned Multi Select 使用教程

react-native-sectioned-multi-select a multi (or single) select component with support for sub categories, search, chips. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-sectioned-multi-select

1. 项目介绍

React Native Sectioned Multi Select 是一个用于 React Native 的开源组件，旨在提供一个简单易用的多选下拉菜单。该组件支持分组选项、搜索功能以及自定义样式，适用于需要复杂选择功能的移动应用开发。

2. 项目快速启动

安装

首先，确保你已经安装了 React Native 开发环境。然后，使用 npm 或 yarn 安装 react-native-sectioned-multi-select 组件：

npm install react-native-sectioned-multi-select

或者

yarn add react-native-sectioned-multi-select

基本使用

在你的 React Native 项目中，导入并使用 SectionedMultiSelect 组件：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';

const items = [
  {
    name: 'Fruits',
    id: 0,
    children: [
      { name: 'Apple', id: 10 },
      { name: 'Banana', id: 11 },
    ],
  },
  {
    name: 'Vegetables',
    id: 1,
    children: [
      { name: 'Carrot', id: 12 },
      { name: 'Potato', id: 13 },
    ],
  },
];

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  return (
    <View>
      <SectionedMultiSelect
        items={items}
        uniqueKey="id"
        subKey="children"
        selectText="Choose some things..."
        showDropDowns={true}
        readOnlyHeadings={true}
        onSelectedItemsChange={setSelectedItems}
        selectedItems={selectedItems}
      />
      <Text>Selected Items: {selectedItems.join(', ')}</Text>
    </View>
  );
};

export default App;