Reactjs React本地纸张搜索栏在按键时关闭键盘

正如标题所说。每次我在我的

搜索栏

组件中输入一个字母时，它就会关闭键盘，再次按下搜索栏，我就会被迫重新打开它。你可以想象，这很烦人。 下面是函数组件的代码

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>
  );
}

import React，{useState，useffect}来自“React”；
从“react native”导入{View，Text，FlatList}；
从“react native paper”导入{按钮，搜索栏}；
从“react redux”导入{useSelector}；
进口{
使用字体，
Poppins d u瘦，
Poppins\u 100薄型\u斜体，
Poppins_200超轻型，
Poppins\u 200超轻\u斜体，
波平斯之光，
Poppins\u 300浅斜体，
罂粟花，
Poppins\u 400常规\u斜体，
罂粟花，
罂粟花500中斜体，
波平斯600黑体，
Poppins_600半黑体_斜体，
波平斯·加洛德，
Poppins_700;粗体_斜体，
波平斯·乌特黑体，
Poppins\u 800加粗\u斜体，
黑罂粟花，
罂粟花黑色斜体，
}来自“@expo谷歌字体/poppins”；
从“./导航/标题”导入标题；
导出默认函数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）；
useffect（（）=>{
取回（“http://192.168.1.5:8000/fetchActivities", {
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json字符集=utf-8”，
},
正文：JSON.stringify({
团队：“团队”
}),
})
.然后（（res）=>res.json（））
。然后（（res）=>setAkt（res））；
}, []);
fetchData=async（）=>{
取回（“http://192.168.1.5:8000/fetchActivity", {
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
数据：项目id，
}),
})
.然后（（res）=>res.json（））
。然后（（res）=>{
setIme（res[0]。title）；
setOpis（res[0]。描述）；
setMjesto（res[0]。位置）；
setTip（res[0]。活动类型标识）；
});
};
searchItems=（文本）=>{
const newData=akt.filter（（项）=>{
const itemData=`${item.title.toUpperCase（）}`；
const textData=text.toUpperCase（）；
返回itemData.indexOf（textData）>-1；
});
setData（newData）；
设定值（文本）；
};
项目=（{Item}）=>{
返回(
{item.title}{”“}
{item.start_time}{'}
道具.导航.导航（“Izmjena”{
名称：item.title，
描述：项目描述，
位置：项目位置，
类型：item.activity\u type\u id，
item_id:item.id，
})
}
样式={{marginRight:“3%”，marginBottom:“1%”，颜色：{C5272F}
color=“#C5272F”
>
达耶
);
};
renderHeader=（）=>{
返回(
searchItems（文本）}
value={value}
/>
);
};
RenderParator=（）=>{
返回(
);
};
const{navigation}=props；
返回(
}
keyExtractor={（item）=>item.id.toString（）}
ItemSeparatorComponent={renderSeparator}
ListHeaderComponent={renderHeader}
/>
);
}

我已经将它从类组件转换为函数组件。这是旧代码

---

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

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

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

renderHeader=（）=>{
返回(
searchItems（文本）}
value={value}
/>
);
};
RenderParator=（）=>{
返回(
);
};

这导致在键盘的每个按键上重新渲染（因此键盘关闭）

解决方法是将它们移到导出函数之外

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}
    />
  );
}

函数renderSeparator（）{
返回(
);
}
函数renderHeader（{value}）{
返回(
searchItems（文本）}
value={value}
/>
);
}

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

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

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

renderHeader=（）=>{
返回(
searchItems（文本）}
value={value}
/>
);
};
RenderParator=（）=>{
返回(
);
};

这导致在键盘的每个按键上重新渲染（因此键盘关闭）

解决方法是将它们移到导出函数之外

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}
    />
  );
}

函数renderSeparator（）{
返回(
);
}
函数renderHeader（{value}）{
返回(
searchItems（文本）}
value={value}
/>
);
}