ViewPager 和 GooglePlacesAutocomplete 在 Expo 下的 React Native 中不能一起工作

Question

我在ViewPager组件中有一个GooglePlacesAutocomplete组件，但显然它们在iOS上不能很好地协同工作。

它适用于安卓。

在此代码中，它几乎循环遍历组件列表并使用 ViewPager 水平显示它们。

<View style={styles.container}>
<ViewPager
keyboardDismissMode={"on-drag"}
style={styles.viewPager}
ref={viewPager => {
this.viewPager = viewPager
}}
onPageSelected={page => {
this.setState({ currentPage: page.position })
}}>
{PAGES.map( (page, index) => this.renderViewPagerPage(page, index))}
</ViewPager>
</View>

其他代码只是导入带有一堆样式和标志的 Places API 的组件。

{
return (
<View>
<Text  style={styles.header}>Pick Up Location</Text>
<GooglePlacesAutocomplete
onPress={() => console.log('pressed')} 
styles={{  
container: {
position: "absolute",
top: 40,
width: "100%",
},
textInputContainer: {
flex: 1,
backgroundColor: "transparent",
height: 54,
marginHorizontal: 0,
borderTopWidth: 0,
borderBottomWidth: 0,
paddingBottom: 50,
},
textInput: {
height: 54,
margin: 0,
borderRadius: 0,
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 20,
paddingRight: 20,
marginTop: 0,
marginLeft: 0,
marginRight: 0,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { x: 0, y: 0 },
shadowRadius: 15,
borderWidth: 1,
borderColor: "#ddd",
fontSize: 18,
},
listView: {
borderWidth: 1,
borderColor: "#ddd",
backgroundColor: "#fff",
marginHorizontal: 20,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { x: 1, y: 0},
shadowRadius: 15,
marginTop: 10,
},
description: {
fontSize: 16
},
row: {
padding: 20,
height: 58,}
}}
keyboardShouldPersistTaps='always'
placeholder="Placeholder"
keyboardAppearance={'dark'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
placeholderTextColor="#333"
returnKeyType={'default'}
onPress={(data, details) => {
console.log(data['description']);
}}
currentLocationLabel="Current location"
currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
query={{
key: GOOGLE_MAPS_API_KEY,
language: "en",
components: 'country:pr'
}}
textInputProps={{
autoCapitalize: "none",
autoCorrect: false
}}
fetchDetails={false}
enablePoweredByContainer={true}
/>
</View>   
);
}
}

我有一个ViewPager，它本质上是一种轮播，其中将使用Google的Places API进行自动完成输入容器。

它在 ViewPager 组件之外工作正常，但是当它位于其中时，我无法单击它在自动完成文本时弹出的自动完成列表视图。

Answer 1

父组件还需要具有：

keyboardShouldPersistTaps={"always"}

<ViewPager
keyboardShouldPersistTaps={"always"}
keyboardDismissMode={"on-drag"}
style={styles.viewPager}
ref={viewPager => {
this.viewPager = viewPager
}}
onPageSelected={page => {
this.setState({ currentPage: page.position })
}}>
{PAGES.map( (page, index) => this.renderViewPagerPage(page, index))}
</ViewPager>