React Native："VirtualizedLists should never be nested inside plain ScrollViews.." 警告

Question

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

看完 GIF 短片后，您可能会注意到我收到警告：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

此外，当我尝试点击美国德克萨斯州达拉斯时，没有任何反应。
如果我要删除 <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,

            }
        });

我确实查看了与此相关的大部分 Whosebug 帖子，但我无法最终解决该问题。
谁能帮我理解这个 UI 有什么问题？

Answer 1

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

Also, when I try to click on Dallas, TX, USA nothing happens. If I were to delete the component then when I click on a place, it takes it without any issues.

这是一个常见问题，请尝试将 keyboardShouldPersistTaps='always' 或 keyboardShouldPersistTaps='handled' 添加到您的 <ScrollView />。

Answer 2

我通过用 SectionList 替换 ScrollView 来修复它。

https://reactnative.dev/docs/sectionlist

Answer 3

当我们使用 ScrollView 或 Flatlist 时，这是一个常见问题。为了解决这个问题，我们必须使用 flatlist 并在 ListHeaderComponent 和 ListFooterComponent 中添加页眉和页脚内容。

<FlatList
    data={[1,2,3,4,5]}
    renderItem={(item) => {
        return (
            // Your flatlist item
        )
    }}
  ListHeaderComponent={() => {
      return         // Header Content to should list here
   }}   
    ListFooterComponent={() => {
  return            // Footer Content to should list here
              }}   
/>

React Native："VirtualizedLists should never be nested inside plain ScrollViews.." 警告

React Native: "VirtualizedLists should never be nested inside plain ScrollViews.." warning

user-interface

scrollview

reactjs

react-native