我正在研究小型 react-native 组件，我遇到了与 Flatlist 一起使用的 TextInput 字段相关的问题。所以我基本上有一个平面列表，它在帖子上呈现评论列表，在屏幕底部，我有一个 TextInput 字段（它的位置是绝对的），用户可以在其中评论帖子。我面临的问题是，当我尝试在输入字段上键入时，键盘在第一次击键后消失（或关闭）。即使在尝试了许多可能的建议解决方案之后，我也不知道是什么导致了这个问题（比如平面列表渲染的密钥不应该是随机的等）。我已将整个代码放在下面以供参考。我期待着您对如何解决它的建议或参考。
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>
)
}
我不确定我的解释是否正确，如果不正确请指出
这与react组件生命周期有关。
当您在 textInput 中键入并触发状态更改时，您的功能组件
Comment()为了防止这种情况，您可以
<FlastlistFooter/>{FlastlistFooter()}const FlastlistFooter =({value, onChangeText}) =>{
//Move FlastlistFooter outside Comment()
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={value}
onChangeText={onChangeText}
// onEndEditing={()=>onchange(txt)}
// onFocus={HanldeSendbtn}
/>
{sndbtn?<TouchableOpacity>{sndbtn?<Icon color={sndColor} name='send' size={28}/>:null}</TouchableOpacity>:null}
</View>
)
}
export default function Comment() {
const [txt,settxt] = useState("")
const [sndbtn,setsendbtn] = useState(false)
...
return (
<SafeAreaView>
<FlatList
contentContainerStyle={{ paddingBottom: 100 }}
ListHeaderComponent={FlatlistHeader}
keyboardShouldPersistTaps="always"
data={CommentDat[0].list_comment}
renderItem={CommentView}
/>
<FlastlistFooter
value={txt}
onChangeText={v=>settxt(v)}
/>
</SafeAreaView>
)
}