네이티브 동적 다중 드롭 다운 (피커)

Question

여러 피커를 구현하려는 경우 피커 수는 텍스트 상자에서 선택한 값을 기반으로합니다. 다이나믹 피커 (루프를 통해)의 문제점은 피커의 "selectedValue"속성을 올바르게 사용할 수 없다는 것입니다. 피커의 값을 동적으로 설정할 수 없습니다.

예 : 위의 코드에서, 코드

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

는 UI에서 선택기 값을 설정해야 함수의 setValue하지만 변경 만 상태 값이지만 값은 UI에서 선택되지.

Answer 1

데이터를 맵핑 할 때 바닐라 RN이 좋아하지 않기 때문에 나는 react-native-smart-picker를 사용하고 싶습니다.

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