ネイティブ動的複数ドロップダウン（ピッカー）

Question

複数のピッカーを実装したい場合、ピッカーの数はテキストボックスで選択した値に基づいています。 ダイナミックピッカー（スルーループ）の問題は、ピッカーの "selectedValue"プロパティを正しく使用できないことです。Pickerの値を動的に設定できません。

例えば、コードは、上記のコードで

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

関数のsetValueがUIにピッカー値を設定すべきであるが、唯一の状態値が変化しなく値がUIで選択されていません。

Answer 1

私はあなたがデータを.mapするときにバニラのRNが好きではないので、反応ネイティブスマートピッカーを使いたいです。

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