我的<ScrollView>和<GooglePlacesAutocomplete>组件有问题。
观看简短的 GIF 后,您可能会注意到我收到了一条警告:
VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中 - 使用另一个 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}> …Run Code Online (Sandbox Code Playgroud) 有人可以帮助我理解我没有做正确的事情吗?考虑这个简单的代码
var images = [];
const [funImage, setFunImage] = useState([]);
//Some function that does this below
firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then((querySnapshot) =>{
querySnapshot.forEach(async(doc) =>{
const ref = firebase.storage().ref('images/'+ doc.data().image)
const result = await ref.getDownloadURL();
images.push(result);
})
setFunImage(images);
});
Run Code Online (Sandbox Code Playgroud)
我不明白为什么在完成setFunImage(images);之前执行images.push(result);将所有结果推入数组。我认为await会阻止它下面的其余代码基本上我想做的事情背后的概念是将我的所有结果推送到images然后调用setFunImage(images);.
我怎样才能做到这一点?有可能吗?
编辑
我更改了代码,希望找到解决方案,这就是我到目前为止所达到的位置:
firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then((querySnapshot) => {
querySnapshot.forEach(async(doc) => {
const ref = firebase.storage().ref('images/' + doc.data().image)
const result = await ref.getDownloadURL();
images.push(result);
setFunImage(...funImage,images);
})
});
Run Code Online (Sandbox Code Playgroud)
有趣的是,当这个函数执行时,funImage会填充 1 个图像,但是当我刷新时,它会填充 Firebase 中的其余图像。 …
async-await firebase reactjs react-native google-cloud-firestore