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

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修复垂直填充。

万一您能负担得起一个依赖项，请检查一些像 这样的第三方组件 ，它是高度可定制的

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

Answer 2

免责声明：适用于 Android，我不知道它是否适用于 IOS。

就我而言，将边距设置为-16（因为选择器的填充设置为 16）并使用 style: 中设置的以下内容将选择器包装到视图中就足够了overflow: 'hidden', justifyContent: 'center', display: 'flex'。现在可以通过在视图上设置填充来设置填充。顺便说一句，设置视图高度也适用于选择器。

        <View
            style={{
              width: '70%',
              borderStyle: 'solid',
              borderWidth: 1,
              borderColor: 'black',
              height: 20,
              padding: 6,
              overflow: 'hidden',
              justifyContent: 'center',
              display: 'flex',
            }}>
            <Picker
              mode="dropdown"
              style={{
                backgroundColor: 'yellow',
                margin: -16,
              }}
              onValueChange={(itemValue, itemIndex) => {}}>
              <Picker.Item label="Java" value="java" style={{fontSize: 10}} />
              <Picker.Item label="JavaScript" value="js" style={{fontSize: 10}} />
            </Picker>
          </View>