时间戳

首页 > 解决方案 > React Native 中的 ModalDropdown 宽度问题

ios - React Native 中的 ModalDropdown 宽度问题

问题描述

我正在开发一个 React Native 应用程序。我正在测试它 os 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)}
        />

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

在此处输入图像描述 我希望下拉菜单与“请选择...”文本框对齐。我曾尝试更改“下拉样式”的宽度，但这不适用于 iPhone、iPad 等不同设备。我怎样才能使它在所有设备上都能正常工作。

标签： ioscssreact-native

解决方案

如果屏幕宽度值不允许百分比值，则使用整个屏幕宽度除。

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

推荐阅读