探索React Native世界的利器：react-native-multiple-select

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MultipleSelect from 'react-native-multiple-select';
 
const Selector = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const [options, setOptions] = useState([
    { id: 1, title: 'Option 1' },
    { id: 2, title: 'Option 2' },
    { id: 3, title: 'Option 3' },
    // ...更多选项
  ]);
 
  const onSelectedItemsChange = (selectedItems) => {
    setSelectedItems(selectedItems);
  };
 
  return (
    <View style={styles.container}>
      <MultipleSelect
        style={styles.select}
        single={false}
        hideSubmitButton={true}
        options={options}
        selectedItems={selectedItems}
        onSelectedItemsChange={onSelectedItemsChange}
      />
      <View style={styles.selectedContainer}>
        {selectedItems.map((item) => (
          <Text key={item.id}>{item.title}</Text>
        ))}
      </View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  select: {
    height: 150,
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 10,
  },
  selectedContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});
 
export default Selector;

这个例子展示了如何在React Native应用中使用react-native-multiple-select来创建一个多选器。用户可以从给定的选项中选择多个项目，选中的项目会显示在一个文本列表中。这个例子简单易懂，并且展示了如何使用React Hooks来管理状态。