React Native中TextInput输入单个字符后键盘自动消失的问题求助

大家好，我正在开发一个小型React Native组件，遇到了一个和FlatList搭配使用TextInput的问题。

我的场景是这样的：页面上有一个FlatList用来展示帖子的评论列表，屏幕底部用绝对定位放了一个TextInput，用户可以在这里输入评论。但现在的问题是，我在输入框里打字时，每输入第一个字符后键盘就会自动消失，试了很多网上的解决方案（比如FlatList的key不要用随机值之类的）都没解决。

下面是我的完整代码，希望大家能给我一些解决思路或者参考方向，谢谢！

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>

)

}

备注：内容来源于stack exchange，提问作者JustDev