React-native textInput onFocus 不起作用

Question

我正在尝试为 TextInput 制作 onFocus 样式，但无论我尝试什么都行不通，
这是我当前的代码

import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
      {...props}
    />
  );
};

export default Input;

我还尝试将它包裹在 TouchableOpacity 并将其传递给 onPress 的 setFocused 函数，但它也不起作用
请问有什么建议吗？

Answer 1

如果你的 Prop 覆盖了 onFocus 函数，就像这样把它放在头上

import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      {...props}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
    />
  );
};

export default Input;