聚焦 nativebase TextArea 组件时如何更改边框颜色？

Question

我在 React 应用程序中使用 Native base，我遇到的问题是 TextArea 组件上的 _focus={{}} 不起作用。我把代码放在这里，如果有人知道如何让它工作，我将不胜感激。谢谢！

import React from 'react';

import { TextArea } from 'native-base';

function TextAreaComponent({
  height = '20',
  placeholder,
  width = '75%',
  maxWidth = '300',
  isInvalid = false,
  isDisabled = false,
  backgroundColor = '#F4F4F6',
  borderColor = '#E1E0E6',
  borderWidth = '1px',
  color = '#73737D',
  fontSize = '14px',
  numberOfLines = '4',
}) {
  return (
    <TextArea
      height={height}
      placeholder={placeholder}
      width={width}
      maxWidth={maxWidth}
      isInvalid={isInvalid}
      isDisabled={isDisabled}
      backgroundColor={backgroundColor}
      borderColor={borderColor}
      color={color}
      borderWidth={borderWidth}
      fontSize={fontSize}
      numberOfLines={numberOfLines}
      _focus={{ borderColor: 'white' }}
      // _focus={{ borderColor: '#fff' }} //? focus here left to implement.

    />
  );
}

export default TextAreaComponent;

Answer 1

我不太熟悉代码库，但我认为 _focus 道具与 react-native 中 Input 组件的 onFocus 相同。

这里是一个如何 onFocus:

的例子

<Input
   ...
   onFocus={() => {
     updateBorderColor({ borderColor: 'white' });
   }}
/>

也许尝试遵循与 _focus 相同的逻辑？

聚焦 nativebase TextArea 组件时如何更改边框颜色？

How to change border color when focus on a nativebase TextArea Component on focus?

css

reactjs

react-native

native-base