选择器不能接受Borderradius的形式样式

Question

我是React Native的新手。我需要有一个从file.js读取的下拉列表。我使用以下采摘器：

<Picker
style={Commonstyles.dropdownStyle}
mode="dropdown"
selectedValue={this.state.PickerValueHolderCity}
onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolderCity: itemValue})}>
{ console.log("mydataxxx", mydata) && this.renderPickerItemsCity(mydata)}
</Picker>

一切对我来说都很好。我的问题是我需要应用具有灰色背景和曲线年龄的样式。但是，它只是向我展示了没有曲线边框的灰色背景。

我使用以下样式：

  dropdownStyle: {
    //flex: 1,
    backgroundColor: '#ecf0f1',
    marginBottom: 7,
    padding: 7,
    alignSelf: "stretch",
    // Set border width.
    borderWidth: 1,
    // Set border Hex Color Code Here.
    borderColor: '#bdc3c7',
    // Set border Radius.
    borderRadius: 10 ,
    //  marginBottom: 10,
  },

您能帮我在选择器上应用以下样式吗？我应该提到，我的样式在文本框上正常工作。

Answer 1

将您的选择器放入视图

<View style={{borderRadius: 10, borderWidth: 1, borderColor: '#bdc3c7', overflow: 'hidden'}}>

并将挑选器的宽度设置为视图的宽度。

Answer 2

使用此代码。这对我有用。

<View
    style={{
    paddingVertical: 8,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderRadius: 20,
}}>
    <Picker style={{height: 24}}>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
    </Picker>
</View>

Answer 3

用于带边框收音机和颜色的下拉样式以及图标复制此代码将节省很多时间

我希望这将在将来有所帮助

import RNPickerSelect from 'react-native-picker-select';
<RNPickerSelect
                 style={{
                    ...pickerSelectStyles,
                    inputAndroid: {color: 'black',borderWidth:1,borderColor:'#000',borderRadius:10},
                    inputIOS:{}   //for ios style code go here
                    iconContainer: {
                      paddingLeft: 20,
                      right: 10,
                    },
                  }}
                //   placeholder={}
                placeholder={{
                    label: 'Select a issue...',
                    value: null,
                }}
        onValueChange={(value) => console.log(value)}
        items={option}
        useNativeAndroidPickerStyle={false}
        Icon={() => {
            return (
              <View
                style={{
                  backgroundColor: 'transparent',
                  borderTopWidth: 8,
                  borderTopColor: 'gray',
                  borderRightWidth: 10,
                  alignItems:'center',
                  justifyContent:'center',
                  borderRightColor: 'transparent',
                  borderLeftWidth: 10,
                  borderLeftColor: 'transparent',
                  width: 10,
                  marginTop:'100%',
                  height: 0,
                }}
              />
            );
          }}
    />

    const pickerSelectStyles = StyleSheet.create({
inputIOS: {
  fontSize: 16,
  paddingVertical: 12,
  paddingHorizontal: 20,
  borderWidth: 1,
  height: 50,
  borderRadius: 4,
  borderColor: 'grey',
  paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'green',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
})

Answer 4

使用borderradius不会更改任何内容，而是使用BorderTopleftradius，postright ..单击下拉时断裂。这修复了我的问题

      <DropDownPicker 
            containerStyle={{ height: 50, width: '100%', marginBottom: 20}}
            style={{ backgroundColor: '#fafafa',
              borderRadius: 50,
              borderTopStartRadius: 50,
              borderTopEndRadius: 50,
              borderBottomStartRadius: 50,
              borderBottomEndRadius: 50,
              borderColor: '#c72525',
              borderWidth: 1,
            }}
            itemStyle={{
              justifyContent: 'flex-start',
            }}
            dropDownStyle={{ backgroundColor: '#fafafa' }}
            onChangeItem={(item) =>
              this.setState({
                selectedContact: item.value,
              })
            }
          />

Answer 5

从https://www.npmjs.com/package/reaect-native-dropdown-picker提出的解决方案。您唯一必须避免的是Borderradius。所有的角都必须分别设置。

style={{
    borderTopLeftRadius: 10, borderTopRightRadius: 10,
    borderBottomLeftRadius: 10, borderBottomRightRadius: 10
}}