React Native中的ModalDropdown宽度问题

时间:2019-08-23 12:20:52

标签: ios css react-native

我正在研究React Native应用程序。我正在IOS中对其进行测试,我已在其中使用ModalDropdown,ModalDropdown的代码为:

<ModalDropdown
        style={{display:"flex", justifyContent:"flex-start",fontSize:16, height:35, width:"99%", borderWidth:1, borderColor:'lightgrey', borderRadius:50, paddingTop:4, paddingLeft:14, marginLeft:6, paddingRight:14}}
        textStyle={{color:"grey", fontSize:16}}
        dropdownStyle={{width:"80%"}}
        dropdownTextStyle={{color:"gray", fontSize:16}}
        options={this.state.checklists}
        onSelect={(value) => this.onChangeTextPress(value)}
        />

这显示了这样的下拉列表:

enter image description here 我希望下拉列表与“请选择...”文本框对齐。我曾尝试更改“下拉样式”的宽度,但这不适用于iPhone,iPad等其他设备。我如何才能在所有设备上正常工作。

1 个答案:

答案 0 :(得分:1)

如果屏幕宽度值不允许使用百分比值,请使用整个屏幕宽度划分。

dropdownStyle={{width: (Dimensions.get('window').width / 5) * 4 }}