React Native 如何在原生基础Select Component中更改borderColor？

ia2d9nvy 于 2023-08-07 发布在 React

关注(0)|答案(2)|浏览(117)

我正在尝试从本机基础更改此Select Component上的borderColor。
下面是默认颜色和聚焦颜色的图像：
x1c 0d1x的数据
默认情况下，边框为黑色。我已经尝试了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>

 );
}```

字符串

react-native

来源：https://stackoverflow.com/questions/71341734/how-do-i-change-bordercolor-in-native-base-select-component

2条答案

按热度按时间

67up9zun1#

您可以使用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>
  );
};

字符串

赞(0）回复(0）举报 2023-08-07

2uluyalo2#

不知道你是否已经找到了如何更改默认边框，但我偶然发现了一个可能的回归链接，现在关闭了：https://github.com/GeekyAnts/NativeBase/issues/4937
此解决方案帮助我更改了DEFAULT灰色边框颜色。也有助于按钮的边框颜色：
第一个月

赞(0）回复(0）举报 2023-08-07