如何更改本机基础选择组件中的边框颜色？

Question

我正在尝试更改borderColor此从本机库中选择的组件。

这是默认颜色和聚焦颜色的图像：

边框默认为黑色。我已经尝试过borderColor=""和none/unset但它没有改变颜色。

如何更改默认和活动边框颜色？

代码在这里..

 useState,
} from 'react';

import {
 Box,
 Select,
 CheckIcon,
} from 'native-base';

function Dropdown({
 options = [],
 placeholder,
 backgroundColor,
 className,
 onChange = () => {},
}) {
 const [value, setValue] = useState('');

 return (
   <Box>
     <Box width="3/4" maxWidth="300">
       <Select
         className={className}
         onChange={onChange}
         minWidth="200"
         selectedValue={value}
         accessibilityLabel="Choose Service"
         placeholder={placeholder}
         backgroundColor={backgroundColor}
         _selectedItem={{
           bg: 'teal.600',
           endIcon: <CheckIcon size="5" />,
         }}
         _focus={{
           bg: 'white',
         }}
         marginTop={1}
         onValueChange={(itemValue) => setValue(itemValue)}
       >
         {options.map((option) => (
           <Select.Item
             label={option.label}
             value={option.value}
             key={option.value}
             style={{ display: 'flex', flexDirection: 'column', padding: 5 }}
           />
         ))}
       </Select>
     </Box>
   </Box>

 );
}```

Answer 1

您可以用来borderColor指定边框颜色和borderWidth指定边框宽度。指定焦点内部的边框颜色_focus。

const Example = () => {
  let [service, setService] = React.useState('');
  return (
    <Center>
      <Box w="3/4" maxW="300">
        <Select
          _focus={{ borderColor: 'yellow.500' }}
          borderColor="red.500"
          selectedValue={service}
          minWidth="200"
          accessibilityLabel="Choose Service"
          placeholder="Choose Service"
          _selectedItem={{
            bg: 'teal.600',
            endIcon: <CheckIcon size="5" />,
          }}
          mt={1}
          onValueChange={(itemValue) => setService(itemValue)}
        >
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>
  );
};