react-native-select-multiple, 一个 customiseable ListView,允许你选择多行

分享于 

5分钟阅读

GitHub

  繁體 雙語
A customiseable ListView that allows you to select multiple rows
  • 源代码名称:react-native-select-multiple
  • 源代码网址:http://www.github.com/tableflip/react-native-select-multiple
  • react-native-select-multiple源代码文档
  • react-native-select-multiple源代码下载
  • Git URL:
    git://www.github.com/tableflip/react-native-select-multiple.git
    Git Clone代码到本地:
    git clone http://www.github.com/tableflip/react-native-select-multiple
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/tableflip/react-native-select-multiple
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-select-multiple

    dependencies Status

    一个 customiseable ListView,允许你选择多行。

    select-multiple

    安装

    npm install react-native-select-multiple

    用法

    importReact, { Component } from'react'import { View } from'react-native'importSelectMultiplefrom'react-native-select-multiple'constfruits= ['Apples', 'Oranges', 'Pears']// --- OR ---// const fruits = [// { label: 'Apples', value: 'appls' },// { label: 'Oranges', value: 'orngs' },// { label: 'Pears', value: 'pears' }// ]classAppextendsComponent {
     state = { selectedFruits: [] }
     onSelectionsChange= (selectedFruits) => {
     // selectedFruits is array of { label, value }this.setState({ selectedFruits })
     }
     render () {
     return (
     <View><SelectMultiple
     items={fruits}
     selectedItems={this.state.selectedFruits}
     onSelectionsChange={this.onSelectionsChange} /></View> )
     }
    }

    自定义标签

    importReact, { Component } from'react'import { View, Text, Image } from'react-native'importSelectMultiplefrom'react-native-select-multiple'constfruits= ['Apples', 'Oranges', 'Pears']// --- OR ---// const fruits = [// { label: 'Apples', value: 'appls' },// { label: 'Oranges', value: 'orngs' },// { label: 'Pears', value: 'pears' }// ]constrenderLabel= (label, style) => {
     return (
     <View style={{flexDirection:'row', alignItems:'center'}}><Image style={{width:42, height:42}} source={{uri:'https://dummyimage.com/100x100/52c25a/fff&text=S'}} /><View style={{marginLeft:10}}><Text style={style}>{label}</Text></View></View> )
    }classAppextendsComponent {
     state = { selectedFruits: [] }
     onSelectionsChange= (selectedFruits) => {
     // selectedFruits is array of { label, value }this.setState({ selectedFruits })
     }
     render () {
     return (
     <View><SelectMultiple
     items={fruits}
     renderLabel={renderLabel}
     selectedItems={this.state.selectedFruits}
     onSelectionsChange={this.onSelectionsChange} /></View> )
     }
    }

    属性

    Prop默认类型说明
    项目-array所有项目在列表中可用( array 或者 { label, value } )
    加载宏[]array当前选定项( string 或者的array { label, value } )
    onSelectionsChange-func当用户选择或者选择某个项,通过 (selections, item) 时调用回调
    checkboxSource图像object图像源 checkbox复选框。
    selectedCheckboxSource图像object图像源 checkbox复选框。
    listViewProps{}object列表视图的附加道具
    样式默认样式objectListView 容器的样式
    rowStyle默认样式object用于行容器的样式
    checkboxStyle默认样式object样式复选框。
    labelStyle默认样式object文本标签的样式
    selectedRowStyle默认样式object选定的行容器时的样式
    selectedCheckboxStyle默认样式object选中时,样式的样式。
    selectedLabelStyle默认样式object样式选中时用于文本标签。
    renderLabelfunc渲染标签的函数。

    请随意进入 ! 打开一个问题,或者提交 PRs。

    许可证

    ISC © TABLEFLIP

    一个 ( ╯°□°)╯︵TABLEFLIP 项目。

    js-standard-style


    lis  列表  Select  ROWS  Listview  
    相关文章