有没有办法从反应本机选择器组件中删除默认填充？

Question

我想从一开始就在选取器组件内显示文本，而不应用任何填充。我研究过但找不到解决方案。我正在 android.

调试

我的代码：

<View style={[styles.pickerContainer]}>
            <Picker
              selectedValue={this.state.phoneCountryCode}
              style={[styles.pickerText(text),{backgroundColor:'transparent', width: 80 }]}
              itemStyle={{padding:0, backgroundColor:'yellow'}}
              mode="dropdown"
              onValueChange={(itemValue, itemIndex) =>
                this.setState({ phoneCountryCode: itemValue })
              }>
              {Constants.CountryCodes.map((item, index) => (
                <Picker.Item key={item} label={item.label} value={item.value} />
              ))}
            </Picker>
          </View>

风格：

pickerContainer:{
  marginTop: 10, 
  position: 'absolute', left:0, bottom:0, zIndex:10,
},
  pickerText:(text)=>({
  color:'gray',
  height: 40,
  textAlign: 'left',
  padding:0,
  margin: 0,
}),

Answer 1

我对 Picker 组件有同样的问题，正确设置它的样式非常棘手，我将留下一些发现。

使用负数 marginLeft 删除左侧的填充。

使用 width 和包装器视图来管理右侧的填充。

使用 height 修复垂直填充。

以防万一你能负担得起一个依赖项检查一些 third-party 组件，比如 this 它是高度可定制的

PS：你现在可能已经明白了，但我仍然要为其他人留下评论。

有没有办法从反应本机选择器组件中删除默认填充？

Is there a way to remove default padding from react native picker component?

padding

styling

picker

react-native