我正在开发一个小型的react-native组件，我遇到了与Flatlist一起使用的TextInput字段相关的问题。所以我基本上有一个flatlist，它在屏幕底部呈现帖子上的评论列表，我有一个TextInput字段（它的位置是绝对的）用户可以对帖子进行评论的地方我面临的问题是，当我试图在输入栏上打字时键盘消失（或关闭）后，第一次击键。我不知道是什么原因导致这个问题，即使在尝试了许多可能的建议解决方案（如键的flatlist呈现不应该是随机的等）。我把整个代码下面的参考。我期待着你的建议或refernces就如何解决它。

import { View, Text,TouchableOpacity,Image,SafeAreaView, FlatList, TextInput, KeyboardAvoidingView, TouchableWithoutFeedback } from 'react-native'
import React,{useState} from 'react'
import CommentDat from '../Src/CommentDat';
import Icon from 'react-native-vector-icons/Ionicons';
export default function Comment() {
    const [txt,settxt] = useState("")
    const [sndbtn,setsendbtn] = useState(false)
    const FlatlistHeader=()=>{
        return (
            <View style={{paddingVertical: 12,paddingHorizontal: 12,alignItems:"stretch"}}>
                <TouchableOpacity style={{backgroundColor:"grey",width: 100,borderRadius: 6}}><Text style={{color: "white",textAlign: "center"}}>{CommentDat[0].postType}</Text></TouchableOpacity>
                <TouchableOpacity style={{flexDirection: "row",marginTop: 12}}>
                    <Image style={{height: 40,width: 40,borderRadius: 20}} source={{uri:CommentDat[0].photo }} />
                    <View style={{flexDirection:"column",marginLeft: 12}}>
                        <Text style={{fontWeight: "bold",fontSize: 18}}>{CommentDat[0].author}</Text>
                        <Text>address num.Views and times viewed</Text>
                    </View>
                </TouchableOpacity>
                <View style={{marginTop: 12}}>
                    <Text style={{fontWeight: "bold",fontSize: 18}}>{CommentDat[0].title}</Text>
                    <Text>{CommentDat[0].context}</Text>
                </View>
                {/* here we show times viewed and stuff */}
                <View style={{flexDirection: "row",justifyContent: "space-around",marginTop: 16}}>
                    <TouchableOpacity style={{flexDirection: "row",alignItems:"center"}}>
                        <Icon name='md-thumbs-up-outline' />
                        <Text style={{marginLeft: 5}}>share</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{flexDirection: "row",alignItems:"center"}}>
                        <Icon name='md-chatbubble-outline' />
                        <Text style={{marginLeft: 5}}>comment</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{flexDirection: "row",alignItems:"center"}}>
                        <Icon name='heart-outline' />
                        <Text style={{marginLeft: 5}}>Interest</Text>
                    </TouchableOpacity>
                </View>

            </View>
        )
    }
    // const handleTxtChange = React.useCallback((text) => {
    //   settxt(text);
    // }, []);
    // const HanldeSendbtn =()=>{
    //     setsendbtn(true)
    // }
    const sndColor = txt?"red":"grey"

    const CommentView = ({item,index}) => {
        return (
          <View>
          <View key={index} style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10,justifyContent: "space-between" }}>
            <TouchableOpacity style={{flexDirection: "row",marginLeft: 8}}>
            <Image source={{ uri: item.photo }} style={{ width: 50, height: 50, borderRadius: 25, marginRight: 10 }} />
            <View style={{ flexDirection: "column" }}>
              <Text style={{fontWeight: "bold",fontSize: 18}}>{item.author}</Text>
              <Text>{item.address} . {item.timePost}hrs. ago</Text>
            </View>
            </TouchableOpacity>
            <TouchableOpacity><Icon name='ellipsis-vertical' /></TouchableOpacity>
          </View>
           <View style={{paddingHorizontal: 68}}>
              <Text>{item.context}</Text>
              <View style={{flexDirection: "row"}}>
                    <TouchableOpacity style={{flexDirection: "row",alignItems:"center"}}>
                        <Icon name='md-thumbs-up-outline' />
                        <Text style={{marginLeft: 5}}>like</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{flexDirection: "row",alignItems:"center",marginLeft: 18}}>
                        <Icon name='md-chatbubble-outline' />
                        <Text style={{marginLeft: 5}}>comment</Text>
                    </TouchableOpacity>
            </View>
            </View>
          </View>
        );
      };
    const FlastlistFooter =() =>{
        return (
            <View style={{position: "absolute",bottom: 0,backgroundColor: '#fff',flexDirection: "row",alignItems:"center",width: "100%"}}>
                <TouchableOpacity style={{marginLeft: 16}}><Icon name='image-outline' size={28}/></TouchableOpacity>
                <TouchableOpacity style={{marginLeft: 6}}><Icon name='location-outline' size={28}/></TouchableOpacity>
                  <TextInput
                  style={{height: 36,width: 260,margin: 12,borderWidth: 1,borderRadius: 20, padding: 10,}}
                  placeholder='write your comment'
                  value={txt}
                  onChangeText={v=>settxt(v)}
                  // onEndEditing={()=>onchange(txt)}
                  // onFocus={HanldeSendbtn}
                  />
                {sndbtn?<TouchableOpacity>{sndbtn?<Icon color={sndColor} name='send' size={28}/>:null}</TouchableOpacity>:null} 
            </View>
        )
    }
  return (
    <SafeAreaView>
      <FlatList
        contentContainerStyle={{ paddingBottom: 100 }}
        ListHeaderComponent={FlatlistHeader}
        keyboardShouldPersistTaps="always"
        data={CommentDat[0].list_comment}
        renderItem={CommentView}
      />
      
      <FlastlistFooter/>
    </SafeAreaView>
  )
}