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

Question

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

它适用于Android。

在这段代码中，它几乎循环了一个组件列表并使用 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 的 AutoComplete 输入容器。

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

标签： iosreactjsreact-nativegoogle-apiexpo

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>