javascript - How to set up picker's border - Stack Overflow

admin管理员组

文章数量:1333434

I have Picker from 'react-native'. Picker.Item there are :"Monday, Tuesday, Wednesday etc".

I want to set up picker's properties like borderRadius:10

even style={{borderRadius:30}} not helped.

<Picker
        style={styles.pickerStyle}
        tvParallaxTiltAngle
        selectedValue={this.props.shift}
        onValueChange={value => this.props.employeeUpdate({ prop: 
    'shift', value })}
      >
        <Picker.Item color="#A4A4A5" label="Monday" value="Monday" 
     />
        <Picker.Item color="#A4A4A5" label="Thuesday" 
    value="Thuesday" />
        <Picker.Item color="#A4A4A5" label="Wednesdady" 
    value="Wednesdady" />
        <Picker.Item color="#A4A4A5" label="Thursday" 
    value="Thursday" />
        <Picker.Item color="#A4A4A5" label="Friday" value="Friday" 
    />
        <Picker.Item color="#A4A4A5" label="Saturday" 
    value="Saturday" />
        <Picker.Item color="#A4A4A5" label="Sunday" value="Sunday" 
    />
</Picker>

I have Picker from 'react-native'. Picker.Item there are :"Monday, Tuesday, Wednesday etc".

I want to set up picker's properties like borderRadius:10

even style={{borderRadius:30}} not helped.

<Picker
        style={styles.pickerStyle}
        tvParallaxTiltAngle
        selectedValue={this.props.shift}
        onValueChange={value => this.props.employeeUpdate({ prop: 
    'shift', value })}
      >
        <Picker.Item color="#A4A4A5" label="Monday" value="Monday" 
     />
        <Picker.Item color="#A4A4A5" label="Thuesday" 
    value="Thuesday" />
        <Picker.Item color="#A4A4A5" label="Wednesdady" 
    value="Wednesdady" />
        <Picker.Item color="#A4A4A5" label="Thursday" 
    value="Thursday" />
        <Picker.Item color="#A4A4A5" label="Friday" value="Friday" 
    />
        <Picker.Item color="#A4A4A5" label="Saturday" 
    value="Saturday" />
        <Picker.Item color="#A4A4A5" label="Sunday" value="Sunday" 
    />
</Picker>

• javascript
• react-native
• styles

Share Follow edited Jul 24, 2019 at 8:38 Mehadi Hassan 1,24011 gold badge1414 silver badges3333 bronze badges asked Jul 24, 2019 at 8:14 bekanur98bekanur98 52011 gold badge88 silver badges2222 bronze badges 3

• Do you want to add a borderRadius to the whole picker or to any single item? – Auticcat Commented Jul 24, 2019 at 8:22
• I want to use borderRadius to visible picker. – bekanur98 Commented Jul 24, 2019 at 8:33
• If your question has been answered, please make sure to accept and vote up an answer for further references. – MoKhajavi75 Commented Jul 25, 2019 at 4:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can wrap your <Picker> inside a <View> like this:

<View
  style={{flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'stretch',
  borderWidth: 1,
  borderRadius: 10
}}>
    <Picker>
        ...
    </Picker>
</View>

for drop down style with border radios and color along with icon copy past this code will save a lot time

I hope this will help some one in future

  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
 },
 })

本文标签： javascriptHow to set up picker39s borderStack Overflow