使用“react-native-modal-dropdown”在 React Native 中对齐右模式下拉菜单

Question

我有一段代码使用“react-native-modal-dropdown”在 React Native 中显示下拉菜单

  <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>

结果是“A”后面显示的下拉菜单：enter image description here

我希望下拉菜单显示后面的“▼”，这是正确的。 enter image description here

你能帮帮我吗？非常感谢。

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>