React native 使用可重用的函数组件对本机条件样式onFocus onBlur作出反应

我有一个可重用的文本输入组件，使用我在许多屏幕上使用的Native Base，目标是当文本输入在焦点上时，边框的颜色将更改为#6852E1。启用“模糊”时，它将更改为#8b

下面的代码不符合我的要求，或者我的代码有问题。我怎样才能做到这一点？谢谢

这是密码

import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Item, Input, Label, Icon } from "native-base";
import * as Font from "expo-font";

let borderColor;

// prettier-ignore
Font.loadAsync({
  Calibre_Regular: require("../assets/fonts/Calibre-Regular.ttf"),
  "Calibre_Regular": require("../assets/fonts/Calibre-Regular.ttf"),
});

const CustomTextInput = ({
  value,
  onChangeText,
  label,
  onSubmitEditing,
  getRef,
  onPress,
  onPress2,
  returnKeyType,
  keyboardType,
  editable,
  secureTextEntry,
  iconName,
  iconName2,
  whichStyle,
  defaultValue,
}) => {
  const { itemStyle1, itemStyle2, textInput, floatingLabel } = InputFieldStyles;
  return (
    <Item
      floatingLabel
      style={whichStyle ? itemStyle2 : itemStyle1}
      onPress={onPress2}
    >
      <Icon style={{ marginLeft: 10, color: "#8B8B8B" }} name={iconName2} />
      <Label style={floatingLabel}>{label}</Label>
      <Input
        onBlur={() => (borderColor = "#8B8B8B")}
        onFocus={() => (borderColor = "#6852E1")}
        style={textInput}
        blurOnSubmit={false}
        getRef={getRef}
        value={value}
        defaultValue={defaultValue}
        editable={editable}
        onChangeText={onChangeText}
        onSubmitEditing={onSubmitEditing}
        returnKeyType={returnKeyType}
        keyboardType={keyboardType}
        secureTextEntry={secureTextEntry}
      />
      <Icon name={iconName} onPress={onPress} />
    </Item>
  );
};

const InputFieldStyles = {
  textInput: {
    padding: 10,
    marginVertical: 10,
    fontSize: 16,
    color: "rgba(0, 0, 0, 0.87)",
    fontFamily: "Calibre_Regular",
  },
  floatingLabel: {
    marginLeft: 10,
    marginTop: 8,
    fontFamily: "Calibre_Regular",
  },
  itemStyle1: {
    marginLeft: 0,
    backgroundColor: "#FFF",
    borderColor: borderColor,
    // borderColor: "#6852E1",
    // borderColor: "#8B8B8B",
    borderBottomWidth: 3,
  },
  itemStyle2: {
    marginLeft: 0,
    backgroundColor: "#F6F7FC",
    borderColor: borderColor,
    borderBottomWidth: 3,
  },
  itemStyle3: {
    marginLeft: 0,
    backgroundColor: "#FFF",
    borderColor: "#6852E1",
    borderBottomWidth: 3,
  },
};

export { CustomTextInput };

import React，{useState}来自“React”；
从“react native”导入{Dimensions}；
从“本机库”导入{Item，Input，Label，Icon}；
从“expo字体”导入*作为字体；
让我们用颜色；
//漂亮的忽略
Font.loadAsync({
Calibre_Regular:require（“../assets/fonts/Calibre Regular.ttf”），
“Calibre_Regular”：要求（../assets/fonts/Calibre Regular.ttf”），
});
常量CustomTextInput=({
价值
一旦更改文本，
标签，
在submitediting上，
getRef，
新闻界，
新闻二,，
返回键类型，
键盘式，
可编辑，
secureTextEntry，
我的名字，
iconName2，
哪种风格，
默认值，
}) => {
const{itemStyle1，itemStyle2，textInput，floatingLabel}=InputFieldStyles；
返回(
{label}
（borderColor=“#8b”）}
onFocus={（）=>（borderColor=“#6852E1”）}
样式={textInput}
blurOnSubmit={false}
getRef={getRef}
value={value}
defaultValue={defaultValue}
可编辑={editable}
onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing}
returnKeyType={returnKeyType}
keyboardType={keyboardType}
secureTextEntry={secureTextEntry}
/>
);
};
常量输入字段样式={
文本输入：{
填充：10，
玛吉：10，
尺寸：16，
颜色：“rgba（0,0,0,0.87）”，
fontFamily：“常规口径”，
},
浮动标签：{
边缘左：10，
玛金托普：8，
fontFamily：“常规口径”，
},
itemStyle1：{
marginLeft:0，
背景颜色：“FFF”，
borderColor:borderColor，
//边框颜色：#6852E1“，
//边框颜色：#8b“，
边界宽度：3，
},
itemStyle2：{
marginLeft:0，
背景颜色：“F6F7FC”，
borderColor:borderColor，
边界宽度：3，
},
itemStyle3：{
marginLeft:0，
背景颜色：“FFF”，
边框颜色：#6852E1“，
边界宽度：3，
},
};
导出{CustomTextInput}；

这是我的代码，为那些需要帮助的人提供了正确答案

import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Item, Input, Label, Icon } from "native-base";
import * as Font from "expo-font";

// prettier-ignore
Font.loadAsync({
  Calibre_Regular: require("../assets/fonts/Calibre-Regular.ttf"),
  "Calibre_Regular": require("../assets/fonts/Calibre-Regular.ttf"),
});

const CustomTextInput = ({
  value,
  onChangeText,
  label,
  onSubmitEditing,
  getRef,
  onPress,
  onPress2,
  returnKeyType,
  keyboardType,
  editable,
  secureTextEntry,
  iconName,
  iconName2,
  whichStyle,
  defaultValue,
}) => {
  const { itemStyle1, itemStyle2, textInput, floatingLabel } = InputFieldStyles;
  const [isFocused, setIsFocused] = useState(false);

  return (
    <Item
      floatingLabel
      style={whichStyle ? itemStyle2 : itemStyle1({ isFocused })}
      onPress={onPress2}
    >
      <Icon style={{ marginLeft: 10, color: "#8B8B8B" }} name={iconName2} />
      <Label style={floatingLabel}>{label}</Label>
      <Input
        onBlur={() => setIsFocused(false)}
        onFocus={() => setIsFocused(true)}
        style={textInput}
        blurOnSubmit={false}
        getRef={getRef}
        value={value}
        defaultValue={defaultValue}
        editable={editable}
        onChangeText={onChangeText}
        onSubmitEditing={onSubmitEditing}
        returnKeyType={returnKeyType}
        keyboardType={keyboardType}
        secureTextEntry={secureTextEntry}
      />
      <Icon name={iconName} onPress={onPress} />
    </Item>
  );
};

const InputFieldStyles = {
  textInput: {
    padding: 10,
    marginVertical: 10,
    fontSize: 16,
    color: "rgba(0, 0, 0, 0.87)",
    fontFamily: "Calibre_Regular",
  },
  floatingLabel: {
    marginLeft: 10,
    marginTop: 8,
    fontFamily: "Calibre_Regular",
  },
  itemStyle1: ({ isFocused }) => ({
    marginLeft: 0,
    backgroundColor: "#FFF",
    borderColor: isFocused ? "#6852E1" : "#8B8B8B",
    borderBottomWidth: 3,
  }),
  itemStyle2: {
    marginLeft: 0,
    backgroundColor: "#F6F7FC",
    borderBottomWidth: 3,
  },
  itemStyle3: {
    marginLeft: 0,
    backgroundColor: "#FFF",
    borderColor: "#6852E1",
    borderBottomWidth: 3,
  },
};

export { CustomTextInput };

import React，{useState}来自“React”；
从“react native”导入{Dimensions}；
从“本机库”导入{Item，Input，Label，Icon}；
从“expo字体”导入*作为字体；
//漂亮的忽略
Font.loadAsync({
Calibre_Regular:require（“../assets/fonts/Calibre Regular.ttf”），
“Calibre_Regular”：要求（../assets/fonts/Calibre Regular.ttf”），
});
常量CustomTextInput=({
价值
一旦更改文本，
标签，
在submitediting上，
getRef，
新闻界，
新闻二,，
返回键类型，
键盘式，
可编辑，
secureTextEntry，
我的名字，
iconName2，
哪种风格，
默认值，
}) => {
const{itemStyle1，itemStyle2，textInput，floatingLabel}=InputFieldStyles；
const[isFocused，setIsFocused]=useState（false）；
返回(
{label}
setIsFocused（假）}
onFocus={（）=>setIsFocused（true）}
样式={textInput}
blurOnSubmit={false}
getRef={getRef}
value={value}
defaultValue={defaultValue}
可编辑={editable}
onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing}
returnKeyType={returnKeyType}
keyboardType={keyboardType}
secureTextEntry={secureTextEntry}
/>
);
};
常量输入字段样式={
文本输入：{
填充：10，
玛吉：10，
尺寸：16，
颜色：“rgba（0,0,0,0.87）”，
fontFamily：“常规口径”，
},
浮动标签：{
边缘左：10，
玛金托普：8，
fontFamily：“常规口径”，
},
itemStyle1:（{isFocused}）=>({
marginLeft:0，
背景颜色：“FFF”，
borderColor:isFocused？#6852E1:“#8B”，
边界宽度：3，
}),
itemStyle2：{
marginLeft:0，
背景颜色：“F6F7FC”，
边界宽度：3，
},
itemStyle3：{
marginLeft:0，
背景颜色：“FFF”，
边框颜色：#6852E1“，
边界宽度：3，
},
};
导出{CustomTextInput}；

试试这个：

const CustomTextInput = () => {
  const [isFocused, setIsFocused] = setState(false);

  return (
    /** ... */
    <Item style={itemStyle({ isFocused })}>
      >
      <Input
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
    </Item>
    /** ... */
  );
};

itemStyle: ({ isFocused }) => ({
    borderColor: isFocused ? 'focused-color' : 'unfocused-color'
  }),

constCustomTextInput=（）=>{
常数[isFocused，setIsFocused]=setState（false）；
返回(
/** ... */
>
setIsFocused（真）}
onBlur={（）=>setIsFocused（false）}
/>
/** ... */
);
};
itemStyle:（{isFocused}）=>({
边框颜色：聚焦？“聚焦颜色”：“未聚焦颜色”
}),

是的，这是我想要的，我会编辑帖子并添加回答的代码，非常感谢！