React Native dynamische Mehrfachauswahl (Picker)

Question

Ich möchte mehrere Picker implementieren, die Anzahl der Picker basiert auf dem Wert, den wir in einer Textbox auswählen. Das Problem in dynamischen Picker (Through-Schleife) ist, dass ich "SelectValue" -Eigenschaft von Picker nicht richtig verwenden kann. Kann Wert von Picker nicht dynamisch festlegen.

z. Code,

import React, { Component } from 'react'; 
import { View, Picker } from 'react-native'; 

let no_of_pickers = [1,2,3];//3 pickers can be increase or decreased 
export default class App extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      selectValue = [0,0,0] 
     }; 
    } 

    setValue(value,index){ 
     let selectValue = this.state.selectValue; 
     selectValue[index] = value; 
     this.setState({ 
      selectValue:selectValue 
     });//this won't set selected value on picker 
    } 
    render(){ 
     let pickers = no_of_pickers.map((value, i) => { 
      return (
       <View key={i}> 
        <Picker 
        selectedValue={this.state.selectValue[i]} 
        onValueChange={(itemValue, itemIndex) => {this.setValue(itemValue, i)}}> 
         <Picker.Item value='0' label={'Select Value'} /> 
         <Picker.Item value='1' label={'Value 1'} /> 
         <Picker.Item value='2' label={'Value 2'} /> 
         <Picker.Item value='3' label={'Value 3'} /> 
        </Picker> 
       </View> 
      ); 
     }); 
     return (
      {pickers} 
     ); 
    } 
} 

In obigem Code die Funktion setValue sollte den Picker Wert in UI, sondern nur Zustandswert verändert, aber nicht in Wert UI Satz ausgewählt.

Answer 1

Ich mag Reactive-native-Smart-Picker verwenden, weil Vanille RN nicht mag, wenn Sie .map Daten.

render() { 
    return (
     <ScrollView > 
      <View style={{ flex: 1, marginTop: 20 }}> 
       {this.state.models.length > 0 ? 
        <ScrollView > 
         <SmartPicker 

          expanded={this.state.expanded} 
          selectedValue={this.state.selectedModel} 
          label='Select Model' 
          onValueChange={this.handleChange.bind(this)} 
         > 
          { 
           this.state.models.map((ele) => { 
            return (<Picker.Item label={ele} value={ele} />) 
           }) 
          } 
          <Picker.Item label='Select Model' value='4Runner' /> 
         </SmartPicker> 
         <Button block onPress={() => this.props.vehicleModel(this.state.selectedModel)}> 
          <Text>Done</Text> 
         </Button> 
        </ScrollView> 
        : <Spinner />} 

      </View> 

     </ScrollView> 
    ); 
}