我的<ScrollView>和<GooglePlacesAutocomplete>组件出现问题。
链接到当前问题的GIF
看完短GIF后，你可能会注意到我收到了一个警告：
VirtualizedList永远不应该嵌套在具有相同方向的普通ScrollViews中-而是使用另一个VirtualizedList-based容器。
此外，当我试图点击美国德克萨斯州达拉斯时，什么也没发生
如果我要删除<ScrollView>组件，那么当我单击某个位置时，它会毫无问题地删除它。
这是我的代码：
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
[...] //code removed from brevity
return(
<SafeAreaView style={styles.fullPage}>
<ScrollView
stickyHeaderIndices={[0]} >
<Header/>
<View style={styles.container}>
<Text>Search for fun near you</Text>
<View style = {styles.firstLine}>
<Text>On </Text>
<TouchableOpacity onPress={showDatepicker}><MaterialCommunityIcons name="alarm" color={'orange'} size={25} spin={true} /></TouchableOpacity>
{show && (
<DateTimePicker
testID="dateTimePicker"
timeZoneOffsetInMinutes={0}
value={date}
mode={mode}
display="default"
onChange={onChange}
/>)}
</View>
<Text style={styles.txt}>Date: {date.toDateString()}</Text>
<View style = {styles.secondLine}>
<Text>Within </Text>
<ModalDropdown
defaultValue='Pick a mile' options={["5", '10','20','50', '75']}
onSelect= {(index,value)=>{
setMiles(value);
}}
style = {styles.mileageDropdown}>
</ModalDropdown>
<Text> miles of </Text>
</View>
<View style = {styles.thirdLine}>
<GooglePlacesAutocomplete
placeholder='Insert place to find'
minLength={2}
keyboardAppearance={'light'}
fetchDetails={false}
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
{setPlace(data.description)}
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0,
width: '100%',
},
textInput: {
fontSize: 16
},
}}
query={{
key: 'SomeAPIkey',
language: 'en', // language of the results
}}
/>
</View>
<View style={styles.btn}>
<TouchableOpacity onPress={handlePress} style={styles.btnSearch}><Text style={styles.txtbtn}>Search</Text></TouchableOpacity>
</View>
</View>
{arr.map((item, key)=>(
<Card key={key}>
<View style={styles.cardFirstLine}><Text>{item.user}</Text><Text style={{marginLeft:40}}>{item.location}</Text></View>
<View><Text>{item.datePosted}</Text></View>
<View style={styles.cardImage}></View>
<View><Text>{item.description}</Text></View>
<View><Text>{item.eventDate}</Text></View>
<View><Text>{item.comments}</Text></View>
</Card>
))}
</ScrollView>
</SafeAreaView>
)}
const styles = StyleSheet.create({
fullPage:{
flex:1,
},
container:{
paddingTop:65,
margin: 10,
alignItems: 'center'
},
firstLine:{
flexDirection: "row",
alignContent: "center",
padding: 10,
alignItems : 'center'
},
secondLine:{
flexDirection: "row",
padding: 10,
alignItems : 'center'
},
thirdLine:{
flexDirection: "row",
padding: 10,
alignItems : 'center',
justifyContent: 'center',
},
datepicker:{
paddingLeft:10,
paddingTop:5
},
mileageDropdown:{
borderColor: 'black',
borderWidth: StyleSheet.hairlineWidth,
padding:5,
paddingTop:5
},
btn:{
paddingTop:10
},
btnSearch:{
backgroundColor: 'purple',
padding:20,
margin:20,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius : 5,
},
txtbtn:{
fontWeight: 'bold',
fontSize: 14,
color: 'orange'
},
place:{
marginTop: 30,
padding: 10,
borderColor: "red",
borderWidth: StyleSheet.hairlineWidth
},
displayImage:{
width:200,
height:200,
padding:40,
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: "red",
},
txt:{
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: 'black',
},
cardFirstLine:{
padding: 5,
flexDirection:'row',
},
cardImage:{
paddingTop: 15,
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'black',
width: '75%',
height:100,
}
});
我确实查看了大部分关于这方面的StackOverflow帖子，但我一直未能解决这个问题
有人能帮我理解这个用户界面出了什么问题吗？
您收到此警告是因为react-native-google-places-autocomplete渲染了<FlatList />组件以显示结果，而<GooglePlacesAutoComplete />封装在<ScrollView />中。
此外，当我试图点击美国德克萨斯州达拉斯时，什么也没发生。如果我要删除组件，那么当我点击一个地方时，它会毫无问题地删除它。
这是一个常见问题，请尝试将keyboardShouldPersistTaps='always'或keyboardShouldPersistTaps='handled'添加到<ScrollView />中。
我通过用SectionList替换ScrollView来修复它。
https://reactnative.dev/docs/sectionlist