在 React Native 中显示/隐藏 onFocus 和 onBlur 组件

Question

我正在开发一个小型应用程序，其中有一个包含药物“名称、缩略图和图像地址”的文件，称为medications.js 文件。该文件和相关图像存储在本地文件夹中。

我在主页顶部放置了一个文本输入（搜索）框，通过输入药物名称来搜索（过滤药物）药物。 接下来是公司的图像和一个可按的组件，用于在其他屏幕上显示所有图像的缩略图。 （公司图像和可按内容位于 HomeContent 组件中）。默认情况下会显示主页内容。

我面临的问题是：我无法专注于文本输入。不会出现错误。没有留言。

主页内容中的可触摸（所有药物）工作正常

主屏幕代码：

import {
  View,
  SafeAreaView,
  StatusBar,
  TextInput,
  Pressable,
  Image,
  Keyboard,
  Text,
  TouchableOpacity,
  FlatList,
} from "react-native";
import React, { useState, useEffect, useRef } from "react";
import SearchList from "../components/SearchList";
import HomeContent from "../components/HomeContent";
import { medicines } from "../files/allMedicines";

const HomeScreen = ({ navigation }) => {
  const [typeData, setTypeData] = useState("");
  const [allMedicines, setAllMedicines] = useState([]);
  const [showMainContent, setShowMainContent] = useState("");

  useEffect(() => {
    setAllMedicines(medicines);
    setShowMainContent(true);
  }, []);

  const typingData = (value) => {
    setShowMainContent(false);
    setTypeData(value);

    if (value.length > 1) {
      return setAllMedicines(
        medicines.filter((medi) =>
          medi.name.toLowerCase().includes(value.toLowerCase())
        )
      );
    } else if (value.length == 1) {
      setAllMedicines("Type medicine name");
    } else {
      setAllMedicines(medicines);
    }
  };

  

  const closeSearchList = () => {
    Keyboard.dismiss();
    console.log("close pressed");
    setShowMainContent(true);
    setTypeData("");
    setAllMedicines("");
  };

  return (
    <SafeAreaView style={{ flex: 1, marginTop: 0, backgroundColor: "#6ab187" }}>
      <StatusBar backgroundColor="#6ab187" />
      <View
        style={{
          width: "100%",
          height: 60,
          backgroundColor: "#098",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TextInput
          placeholder="search"
          onFocus={() => setShowMainContent(false)}
          onBlur={() => setShowMainContent(true)}
          onChangeText={(data) => typingData(data)}
          value={typeData}
          style={{
            width: 280,
            height: 50,
            backgroundColor: "#fff",
            fontSize: 25,
            textTransform: "uppercase",
            borderTopLeftRadius: 15,
            borderBottomLeftRadius: 15,
            paddingLeft: 10,
            color: "#098", //#eb5757",
          }}
        />
        <Pressable onPress={() => closeSearchList()}>
          <Image
            source={require("../assets/icons/close.png")}
            style={{
              width: 50,
              height: 50,
              backgroundColor: "#fff",
              borderTopRightRadius: 20,
              borderBottomRightRadius: 20,
            }}
          />
        </Pressable>
      </View>
      <View style={{ flex: 1 }}>
        {showMainContent ? (
          <HomeContent navigation={navigation} />
        ) : (
          <SearchList navigation={navigation} allMedicines={allMedicines} />
        )}
      </View>
    </SafeAreaView>
  );
};
export default HomeScreen;

首页内容代码：

import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";

const HomeContent = ({ navigation }) => {
  return (
    <View style={{ flex: 1}}>
      <View
        style={{
          flex: 2,
          alignSelf: "center",
          justifyContent: "center",
          alignitems: "center",
          paddingHorizontal: 5,
        }}
      >
        <Image
          source={require("../assets/images/1.png")}
          style={{
            width: "96%",
            aspectRatio: 0.8,
            resizeMode: "contain",
          }}
        />
      </View>
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "flex-start",
        }}
      >
        <TouchableOpacity
          style={{
            width: 200,
            height: 50,
            padding: 5,
            backgroundColor: "#098",//#eb5757",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 20,
          }}
          onPress={() => navigation.navigate("AllMedicines")}
        >
          <Text style={{ color: "#fff", fontSize: 25, fontWeight: 500 }}>
            All Medicines
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default HomeContent;

搜索列表代码：

import { View, Text, FlatList, TouchableOpacity, Image } from "react-native";
import React from "react";

const SearchList = ({ navigation, allMedicines }) => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        style={{ flex: 1, width: "100%" }}
        data={allMedicines}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <TouchableOpacity
                style={{
                  width: "90%",
                }}
                onPress={() =>
                  navigation.navigate("MedicineDetail", {
                    imagePath: item.image,
                  })
                }
              >
                <View
                  style={{
                    width: "100%",
                    flexDirection: "row",
                    marginVertical: 5,
                    backgroundColor: "#263",
                    borderRadius: 10,
                    padding: 10,
                    alignItems: "center",
                    justifyContent: "space-between",
                    shadowColor: "#171717",
                    shadowOffset: { width: -2, height: 4 },
                    shadowOpacity: 0.9,
                    shadowRadius: 3,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 25,
                      //fontWeight: "500",
                      color: "#fff",
                    }}
                  >
                    {item.name}
                  </Text>
                  <View>
                    <Image
                      source={item.thumb}
                      style={{ width: 40, height: 40, resizeMode: "contain" }}
                    />
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  );
};

export default SearchList;

代码预览：

Answer 1

嗯，我认为问题是当它获得焦点时，你强制改变状态 -> 重新渲染屏幕 -> 失去焦点。

所以只需隐藏此方法

onFocus

即可看到差异