在多選擇下拉反應本土

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

選定的值將被連接在this.state.selectedItem場