Reactネイティブ：「VirtualizedListsをプレーンなScrollViews内にネストすることはできません。」という警告
<ScrollView>および<GooglePlacesAutocomplete>コンポーネントに問題があります。
短いGIFを見ると、警告が表示されていることに気付くでしょう。
VirtualizedListsは、同じ方向でプレーンなScrollView内にネストしないでください。代わりに、別のVirtualizedList-backedコンテナを使用してください。
また、米国テキサス州ダラスをクリックしても、何も起こりません。<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の何が問題になっているのか、誰かが私に理解してくれることはありますか？
react-native-google-places-autocompleteが<FlatList />コンポーネントをレンダリングして結果を表示し、<GooglePlacesAutoComplete />が<ScrollView />にラップされているため、この警告が表示されます。
また、米国テキサス州ダラスをクリックしても、何も起こりません。コンポーネントを削除する場合、場所をクリックすると問題なく実行されます。
これは一般的な問題です。keyboardShouldPersistTaps='always'にkeyboardShouldPersistTaps='handled'または<ScrollView />を追加してみてください。