使用可重用函数组件的React Native Conditional style onFocus onBlur

import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const ConditionalStyleTextInput = () => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <TextInput
      style={[styles.input, isFocused ? styles.focusedInput : styles.blurredInput]}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  focusedInput: {
    borderColor: 'blue',
  },
  blurredInput: {
    borderColor: 'gray',
  },
});

export default ConditionalStyleTextInput;