reactjs - React Native 纸张搜索栏在按键时关闭键盘

Question

正如标题所说。每次我在 SearchBar 组件中输入一个字母时，它都会关闭键盘，我被迫再次按搜索栏来重新打开它。正如你可以想象的那样，这非常烦人。 这是功能组件的代码

import React, { useState, useEffect } from "react";
import { View, Text, FlatList } from "react-native";
import { Button, Searchbar } from "react-native-paper";
import { useSelector } from "react-redux";
import {
  useFonts,
  Poppins_100Thin,
  Poppins_100Thin_Italic,
  Poppins_200ExtraLight,
  Poppins_200ExtraLight_Italic,
  Poppins_300Light,
  Poppins_300Light_Italic,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_500Medium_Italic,
  Poppins_600SemiBold,
  Poppins_600SemiBold_Italic,
  Poppins_700Bold,
  Poppins_700Bold_Italic,
  Poppins_800ExtraBold,
  Poppins_800ExtraBold_Italic,
  Poppins_900Black,
  Poppins_900Black_Italic,
} from "@expo-google-fonts/poppins";

import Header from "../navigation/Header";

export default function AktSelect({...props}) {
  const [data, setData] = useState([]);
  const [value, setValue] = useState("");
  const [akt, setAkt] = useState([]);
  const [ime, setIme] = useState("");
  const [opis, setOpis] = useState("");
  const [mjesto, setMjesto] = useState("");
  const [tip, setTip] = useState("");
  const users = useSelector((state) => state.users);

  useEffect(() => {
    fetch("http://192.168.1.5:8000/fetchActivities", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json charset=utf-8",
      },
      body: JSON.stringify({
          team: 'team'
      }),
    })
        .then((res) => res.json())
        .then((res) => setAkt(res));
  }, []);

  fetchData = async () => {
    fetch("http://192.168.1.5:8000/fetchActivity", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        data: item_id,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        setIme(res[0].title);
        setOpis(res[0].description);
        setMjesto(res[0].location);
        setTip(res[0].activity_type_id);
      });
  };

  searchItems = (text) => {
    const newData = akt.filter((item) => {
      const itemData = `${item.title.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    setData(newData);
    setValue(text);
  };

  Item = ({ item }) => {
    return (
      <View>
        <Text
          style={{
            padding: 10,
            fontSize: 18,
            fontFamily: "Poppins_600SemiBold",
          }}
        >
          {item.title}{" "}
        </Text>
        <View
          style={{
            flexDirection: "row",
            alignItems: "flex-end",
            justifyContent: "flex-end",
          }}
        >
          <Text style={{ padding: 10, fontFamily: "Poppins_400Regular" }}>
            {item.start_time}{" "}
          </Text>
          <Button
            mode="outlined"
            onPress={() =>
              props.navigation.navigate("Izmjena", {
                name: item.title,
                desc: item.description,
                loc: item.location,
                type: item.activity_type_id,
                item_id: item.id,
              })
            }
            style={{ marginRight: "3%", marginBottom: "1%", color: "#C5272F" }}
            color="#C5272F"
          >
            Dalje
          </Button>
        </View>
      </View>
    );
  };

  renderHeader = () => {
    return (
      <Searchbar
        placeholder="Type here..."
        onChangeText={(text) => searchItems(text)}
        value={value}
      />
    );
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#CED0CE"
        }}
      />
    );
  };

  const { navigation } = props;
  return (
    <View
      style={{
        flex: 1,
        width: "98%",
        alignSelf: "center",
        justifyContent: "center",
      }}
    >
      <Header title="Pretraživanje aktivnosti" navigation={navigation} />
      <FlatList
        data={data}
        renderItem={({ item }) => <Item item={item} />}
        keyExtractor={(item) => item.id.toString()}
        ItemSeparatorComponent={renderSeparator}
        ListHeaderComponent={renderHeader}
      />
    </View>
  );
}

我已将它从类组件转换为函数组件。这是旧代码 https://hatebin.com/inkmlddkpz

Answer 1

奇怪的是，我在这篇文章发布后不到 3 分钟就找到了答案 问题是我有这两个功能

  renderHeader = () => {
    return (
      <Searchbar
        placeholder="Type here..."
        onChangeText={(text) => searchItems(text)}
        value={value}
      />
    );
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#CED0CE"
        }}
      />
    );
  };

这会导致键盘每次按键时重新渲染(因此键盘关闭)。

修复方法是将它们移到导出函数之外。

function renderSeparator(){
  return (
    <View
      style={{
        height: 1,
        width: "100%",
        backgroundColor: "#CED0CE"
      }}
    />
  );
}
function renderHeader({value}) {
  return (
    <Searchbar
      placeholder="Type here..."
      onChangeText={(text) => searchItems(text)}
      value={value}
    />
  );
}