Align rechts modal Dropdown in Reaktion india mit 'reagieren-native-modal-Drop-Down'

Question

Ich habe einen Code, um einen Drop-Down in Reaktion zeigt india mit 'reagieren-native-modal-Drop-Down'

<View style = {{alignItems:'center',}}> 
     <TouchableOpacity onPress = {()=>{this.dropDown && this.dropDown.show();}}> 
      <View style = {{width:170,height:40, alignItems:'center',flexDirection:'row'}}> 
       <ModalDropdown ref={(el) => {this.dropDown = el}} 
       options={["A", "B", "C"]} 
       defaultValue = {"A"} 
          style = {{ flex: 1}} 
          textStyle = {{fontWeight:'bold', textAlign: 'right'}} 
          onSelect = {(index,value)=>{this.onClickDropDown(value)}} 
          dropdownStyle={{width:170, }} 
          renderRow={this._dropdown_renderRow.bind(this)} 
       /> 
       <Text>▼</Text> 
      </View> 
     </TouchableOpacity> 
    </View> 

Das Ergebnis ist die Dropdown-Anzeige hinter "A": enter image description here

Ich möchte das Dropdown zeigen die hinter "▼", rechtfertigt es richtig. enter image description here

Können Sie mir helfen? Ich danke dir sehr.

Answer 1

<TouchableOpacity onPress = {()=>{this.dropDown && this.dropDown.show();}}> 
    <View style = {{height:40, alignItems:'center',flexDirection:'row'}}> 
     <ModalDropdown ref={(el) => {this.dropDown = el}} 
     options={["A", "B", "C"]} 
     defaultValue = {"A"} 
         style = {{ flex: 1,paddingRight:30}} 
         textStyle = {{fontWeight:'bold', textAlign: 'right'}} 

         dropdownStyle={{width:170, }} 

     /> 
     <View style={{ position: "absolute", right: 10, top: 10 }}><Text>▼</Text></View> 
    </View> 
</TouchableOpacity>