マルチ選択ドロップダウンでは、私がネイティブ反応する新しいですネイティブ

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} 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 2

使い方

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

選択した値が結合されますそして