react-native-multiple-select, react的简单多选择组件

分享于 

11分钟阅读

GitHub

  繁體 雙語
Simple multi-select component for react-native
  • 源代码名称:react-native-multiple-select
  • 源代码网址:http://www.github.com/toystars/react-native-multiple-select
  • react-native-multiple-select源代码文档
  • react-native-multiple-select源代码下载
  • Git URL:
    git://www.github.com/toystars/react-native-multiple-select.git
    Git Clone代码到本地:
    git clone http://www.github.com/toystars/react-native-multiple-select
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/toystars/react-native-multiple-select
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-multiple-select

    npmDownloadsLicence

    简单的多选择组件,用于React native( 用于本机响应的Select2 )。

    multiplesingle

    重要通知

    我最近忙于工作和其他项目,我真的没有足够的时间来投入这个项目。 如果你想维护这个项目,你可以给我一个电子邮件地址。 谢谢。

    安装

    $ npm install react-native-multiple-select --save

    或者使用纱线

    $ yarn add react-native-multiple-select

    用法

    注意:在使用这个包之前,请确保添加并配置了 react-native-vector-icons插件。

    你可以克隆并试用示例插件应用程序。

    代码段 below 显示了组件的使用方式

    // import componentimportReact, { Component } from'react';import { View } from'react-native';importMultiSelectfrom'react-native-multiple-select';classMultiSelectExampleextendsComponent {
     this.state= {
     selectedItems = [];
     };
     this.items= [{
     id:'92iijs7yta',
     name:'Ondo',
     }, {
     id:'a0s0a8ssbsd',
     name:'Ogun',
     }, {
     id:'16hbajsabsd',
     name:'Calabar',
     }, {
     id:'nahs75a5sg',
     name:'Lagos',
     }, {
     id:'667atsas',
     name:'Maiduguri',
     }, {
     id:'hsyasajs',
     name:'Anambra',
     }, {
     id:'djsjudksjd',
     name:'Benue',
     }, {
     id:'sdhyaysdj',
     name:'Kaduna',
     }, {
     id:'suudydjsjd',
     name:'Abuja',
     }];
     onSelectedItemsChange=selectedItems=> {
     this.setState({ selectedItems });
     };
     render() {
     const { selectedItems } =this.state;
     return (
     <View style={{ flex:1 }}><MultiSelect
     hideTags
     items={items}
     uniqueKey="id" ref={(component) => { this.multiSelect= component }}
     onSelectedItemsChange={this.onSelectedItemsChange}
     selectedItems={selectedItems}
     selectText="Pick Items" searchInputPlaceholderText="Search Items..." onChangeInput={ (text)=>console.log(text)}
     altFontFamily="ProximaNova-Light" tagRemoveIconColor="#CCC" tagBorderColor="#CCC" tagTextColor="#CCC" selectedItemTextColor="#CCC" selectedItemIconColor="#CCC" itemTextColor="#000" displayKey="name" searchInputStyle={{ color:'#CCC' }}
     submitButtonColor="#CCC" submitButtonText="Submit"/><View> {this.multiSelect.getSelectedItemsExt(selectedItems)}
     </View></View> );
     }
    }

    组件采用 3个强制道具- itemsuniqueKeyonSelectedItemsChange。 其他的道具是可选的。表 below 解释了。

    道具

    Prop目
    altFontFamily不是( 字符串) searchInputPlaceholderText的font-family
    canAddItems不是( 布尔值) 默认为"false"。这允许用户将项添加到提供的项列表中。 你需要处理onAddItem函数prop中添加新项。 可以在本机键盘上添加带有返回键的项。
    displayKey不是( 字符串) 默认为"姓名"。这里字符串用于选择在项目 array 中显示对象的键。
    fixedHeight不是( 布尔值) 默认为 false。指定选择下拉列表是否采用内容高度或者固定高度的滚动条( 当组件嵌套在ScrollView中时,这个行为会出现问题,其中滚动事件只被分派到父类,选择组件不会滚动。)。 有关更多信息,请参见
    fontFamily不是( 字符串) 要在组件中使用的自定义 font-family ( 影响上面描述的除了 searchInputPlaceholderText 之外的所有文本)
    fontSize不是( 数字) 选定项 NAME的字体大小显示为多选标签
    hideSubmitButton不是( 布尔) 默认为 false 在 dropdown Hide隐藏提交按钮,而在搜索字段中使用箭头按钮
    autoFocusInput不是( 布尔) 默认为 true 当多选启动时,自动将焦点放在搜索输入上。
    hideTags不是( 布尔值) 默认为 false。隐藏已经标记的项目,以便在视图中显示所选项( 查看 below 更多信息)。
    itemFontFamily不是( 字符串) 在多选择下拉列表中的每个非选定项的font-family
    itemFontSize不是( 数字) 多选择下拉列表中每个项所用的字体大小
    itemTextColor不是( 字符串) 多选择下拉列表中每个非选定项的文本颜色
    项目是的( array。控件道具) 在多选择组件中显示的项列表。 对象的JavaScript array。每个对象必须包含一个 NAME 和唯一标识符( 检查示例 上面 )
    onAddItem不是( 函数) 作为参数传递的JavaScript函数。 函数被称为 everythime,添加一个新项,并接收整个项目列表。 在这里,你应该确保新项目添加到你提供的items 列表中,除了添加新项的任何其他结果之外。
    onChangeInput不是( 函数) 作为参数传递的JavaScript函数。 函数被称为 everythime TextInput 随值的改变而改变。
    onSelectedItemsChange是的( 函数) 作为参数传递的JavaScript函数。 函数将用参数( 加载宏) 定义。 当单击 Submit 按钮时触发,或者单击项目。 ( 检查上面的示例)
    searchInputPlaceholderText不是( 字符串) 在多选择筛选器输入中显示占位符文本
    searchInputStyle不是( 对象) 多选择输入元素的样式对象
    selectText不是( 字符串) 主组件中显示的文本
    selectedItemFontFamily不是( 字符串) 在多选择下拉列表中的每个选定项的font-family
    selectedItemIconColor不是( 字符串) selected 选中的每个选项在多选择下拉列表中选中 icon
    selectedItemTextColor不是( 字符串) 多选择下拉列表中每个选定项的文本颜色
    不是( 布尔) 切换单个选项和多选项之间的选择组件
    submitButtonColor不是( 字符串) 提交按钮的background 颜色
    submitButtonText不是( 字符串) 在提交按钮上显示的文本
    tagBorderColor不是( 字符串) 每个选定项的边框颜色
    tagRemoveIconColor不是( 字符串) 选定项列表中删除 icon 所用的颜色
    tagTextColor不是( 字符串) 选定项列表的文本颜色
    textColor不是( 字符串) 选定项 NAME的颜色显示为多选标签
    uniqueKey是的( 字符串) 属于项的每个属性的唯一标识符。 内部使用作为标识每个项的方法( 检查下面的示例)
    加载宏不是( array,控制道具) 选定项目的列表。 可以使用组件实例化的字符串的JavaScript array

    注释

    • 标记的选定项可以在视图的任何它的他部分中显示,这样就可以将 ref 添加到 MultiSelect 组件 ref={(component) => { this.multiSelect = component }} 然后将这个添加到屏幕的任何部分,你希望令牌显示为: this.multiSelect.getSelectedItemsExt(selectedItems) 传递到 上面 提示方法的selectedItems 参数是作为主组件选定项的所选项传递的相同 selectedItems。 ( 参见上面的示例)。

    • 如果用户不能选择下拉列表中的任何项,请将 disabled 键设置为项目中的true。 这样的项目将以灰色呈现,不会被点击。

    • 使用 single prop时,selectedItems 仍应作为选定项的键的array 传递。 这里外,当在单个模式下选择某个项时,选定的项将作为字符串的array 返回。

    • items 道具必须作为对象的array 传递给每个对象中的强制 name 键作为 NAME 键显示选项组件中的项。

    删除所有选中项

    要使用,请在父组件中的多选组件中添加引用,然后对引用调用方法。 i.e.

    <MultiSelect
     ref={c=>this._multiSelect= c}
     .../>clearSelectedCategories= () => {
     this._multiSelect.removeAllItems();
    };

    捐赠are欢迎,并将全额收费。

    贡献是通过的请求请求接受的。

    请求请求

    • 任何改变行为 Document确保 README.md 和任何其他相关的文档都保持不变。

    • 考虑我们的发布周期我们尝试跟随 SemVer v2.0.0. 随机中断 public api不是一个选项。

    • 创建要素分支 请不要让我们从你的主分支中提取。

    • 按每一个特征请求一个pull请求如果要做多个事情,发送多个请求请求。

    • 发送一致历史 - 确保在请求请求中每个单独的提交都有意义。 如果你在开发过程中必须进行多个中间提交,请在提交前先将它们挤压到。

    问题

    检查当前问题的问题。

    贡献者

    下面列出了贡献者的列表。

    许可证

    MIT许可证( MIT ) 有关详细信息,请参阅许可证


    COM  react  component  NAT  Native  Select