React Native 中的多选下拉列表

Question

我是原生反应新手。任何人都可以建议我如何在本机反应中实现多个选择下拉菜单。我已经尝试过来自react-native-multiple-select的MultiSelect（https://github.com/toystars/react-native-multiple-select），但它不起作用。

Answer 1

这是实现多选源列表的源代码

import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableHighlight, Dimensions} from 'react-native';
var thisObj;
var deviceHeight = Dimensions.get("window").height;

class MyListItem extends React.PureComponent {

    render() {
        return (
            <View style={{flex: 1}}>
                <TouchableHighlight onPress={this.props.onPress.bind(this)} underlayColor='#616161'>
                    <Text style={this.props.style}>{this.props.item.key}</Text>
                </TouchableHighlight>
            </View>
            );
    }
}

export default class MultiSelect extends React.Component {
    constructor(props) {
      super(props);
      var selectedItemsObj = {};
      if(this.props.selectedItems) {
          var items = this.props.selectedItems.split(',');
          items.forEach(function(item) {
            selectedItemsObj[item] = true;
          });   
      }
      this.state = {
        selectedItems: selectedItemsObj
      };
    }

    onItemPressed(item) {
        var oldSelectedItems = this.state.selectedItems;
        var itemState = oldSelectedItems[item.key];
        if(!itemState) {
            oldSelectedItems[item.key] = true;
        }
        else {
            var newState = itemState? false: true;
            oldSelectedItems[item.key] = newState;
        }
        this.setState({
            selectedItems: oldSelectedItems,
        });
        var arrayOfSelectedItems = [];
        var joinedItems = Object.keys(oldSelectedItems);
        joinedItems.forEach(function(key) {
            if(oldSelectedItems[key])
                arrayOfSelectedItems.push(key);
        });
        var selectedItem = null;
        if(arrayOfSelectedItems.length > 0)
            selectedItem = arrayOfSelectedItems.join();
        this.props.onValueChange(selectedItem);
    }

    componentWillMount() {
        thisObj = this;
    }

    getStyle(item) {
        try {
            console.log(thisObj.state.selectedItems[item.key]);
            return thisObj.state.selectedItems[item.key]? styles.itemTextSelected : styles.itemText;
        } catch(e) {
            return styles.itemText;
        }
    }

    _renderItem = ({item}) => {
        return (<MyListItem style={this.getStyle(item)} onPress={this.onItemPressed.bind(this, item)} item={item} />);
    }
    render() {
        return (
            <View style={styles.rootView}>
                <FlatList style={styles.list}
                    initialNumToRender={10}
                    extraData={this.state}
                    data={this.props.data}
                    renderItem={this._renderItem.bind(this)}
                    />
            </View>
            );
    }
}

const styles = StyleSheet.create({
    rootView : {
        height: deviceHeight / 2
    },
    itemText: {
        padding: 8,
        color: "#fff"
    },
    itemTextSelected: {
        padding: 8,
        color: "#fff",
        backgroundColor: '#757575'
    },
    list: {
        flex: 1,
    }
});

这就是组件的使用方式

this.state = {
        selectedItem : null,
        data: [{key:"key1", label:"label1"}, {key:"key2", label:"label2"}]
      } 

...

<MultiSelect 
                data={this.state.data} 
                selectedItems={this.state.selectedItem} 
                onValueChange={ (itemValue) => thisObj.setState({selectedItem: itemValue})}/>

选定的值将被连接并设置在 this.state.selectedItem 字段中

Answer 2

我已经实现了 React Native 组件。 附上源代码。 它展示了如何使列表可检查。 它可能是您解决方案的基础。 请看。

import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableHighlight} from 'react-native';

var thisObj;

export default class MultiSelect extends React.Component {
    constructor(props) {
      super(props);

  this.state = {
    selectedItems: {}
  };
}

onItemPressed(item) {
    var oldSelectedItems = this.state.selectedItems;
    var itemState = oldSelectedItems[item.key];
    if(!itemState) {
        oldSelectedItems[item.key] = true;
    }
    else {
        var newState = itemState? false: true;
        oldSelectedItems[item.key] = newState;
    }
    this.setState({
        selectedItems: oldSelectedItems,
    });
}

componentDidMount() {
    thisObj = this;
}

getStyle(item) {
    try {
        console.log(thisObj.state.selectedItems[item.key]);
        return thisObj.state.selectedItems[item.key]? styles.itemTextSelected : styles.itemText;
    } catch(e) {
        return styles.itemText;
    }
}

render() {
    return (
        <View style={styles.rootView}>
            <FlatList style={styles.list}
                extraData={this.state}
                data={this.props.data}
                  renderItem={({item}) => 
                    <TouchableHighlight onPress={this.onItemPressed.bind(this, item)} underlayColor='#f00'>
                        <Text style={this.getStyle(item)}>{item.key}</Text>
                    </TouchableHighlight>
                  }
                />
        </View>
        );
}
}

const styles = StyleSheet.create({
rootView : {

},
itemText: {
    padding: 16,
    color: "#fff"
},
itemTextSelected: {
    padding: 16,
    color: "#fff",
    backgroundColor: '#f00'
},
list: {

}
});

如何使用这个

<Multiselect data = { [{"key" : "item1"}, {"key" : "item2"}{"key" : "item3"}]
}\>

Answer 3

尝试https://www.npmjs.com/package/rn-multipicker。非常轻巧并且兼容 ios 和 android。