Multi-select-dropdown-Liste im reagieren nativen

Ich bin neu reagieren nativen. Kann jemand empfehlen, wie implementiere ich mehrere select-dropdown-Liste im reagieren nativen. Ich habe versucht, MultiSelect (https://github.com/toystars/react-native-multiple-select) aus reagieren-Muttersprache-mehrere-auswählen, aber es funktioniert nicht.

InformationsquelleAutor Aniket Parab | 2017-10-11
  1. 3

    Dies ist ein source-code implementiert multiselect-Liste Quelle

    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,
    }
});

    Dies ist, wie die Komponente verwendet werden soll

    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})}/>

    Ausgewählten Werte werden zusammengefasst und in diesem.Zustand.selectedItem-Feld

    • die Liste der Artikel, die zur Anzeige in der dropdown-Holen aus der API im JSON-format. Wie kann ich umwandeln dieses format [{key:"key1", label:"label1"}, {key:"key2", label:"label2"}]
    • Sie sollten, so etwas zu tun var resultsArray = []; fetch(url) .dann((response) => response.json()) .dann((responseJson) => { responseJson.forEach(function(Element) { resultArray.push({ key : Element.somekey, label: item.someLabel }); }); dies.setState({ Daten : resultsArray, showModal: true }) }) })
    InformationsquelleAutor Dmytro Marchuk
  2. 1

    Implementierte ich Reagieren Nativen Komponente.
    Source-code zugeordnet ist.
    Es zeigt, wie man die Liste überprüfbar ist.
    Es kann eine Basis für Ihre Lösung.
    Bitte sehen.

    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: {

}
});

    Verwendung dieses

    <Multiselect data = { [{"key" : "item1"}, {"key" : "item2"}{"key" : "item3"}]
}\>
    • Danke @Dmytro Marchuk, ich habe versucht deinen code aber nicht in der Lage um das Ergebnis zu erzeugen. Ich wäre sehr glücklich, wenn Sie könnte vermuten lassen, einige andere Optionen.
    • Sie haben keine andere option zur Verfügung?? @Dmytrom
    • Ich habe umgesetzt multiselect-Liste, aber nicht im dropdown. Brauchst du code?
    • Ich würde lieben, um es zu sehen..!! Ich hoffe, es würde mir irgendwie helfen.
    InformationsquelleAutor Dmytro Marchuk
Schreibe einen Kommentar