React Native：“ VirtualizedLists绝对不能嵌套在纯ScrollViews内。”警告

Question

我的<ScrollView>和<GooglePlacesAutocomplete>组件有问题。

Link to GIF of the current issue

观看了简短的GIF后，您可能会注意到我收到警告：

VirtualizedLists绝不能以相同的方向嵌套在普通ScrollView中-而是使用另一个支持VirtualizedList的容器。

[另外，当我尝试单击美国德克萨斯州达拉斯市时，没有任何反应。如果要删除<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帖子，但最终无法解决该问题。谁能帮助我了解此UI的问题吗？

Answer 1

您收到此警告是因为react-native-google-places-autocomplete渲染了<FlatList />组件以显示结果，并且<GooglePlacesAutoComplete />包裹在<ScrollView />中。