ViewPager и GooglePlacesAutocomplete не работают вместе в React Native в рамках Expo - PullRequest
Новая
       7

ViewPager и GooglePlacesAutocomplete не работают вместе в React Native в рамках Expo

1 голос
/ 12 февраля 2020

У меня есть GooglePlacesAutocomplete компонент внутри ViewPager компонента, но, очевидно, они плохо работают вместе для 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>

Этот другой код просто импортирует компонент для API Places с кучей стилей и флагов для него. 

{
    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, но когда он внутри него, я не могу щелкнуть представление списка автозаполнения, которое появляется при автоматическом заполнении текста.

1 Ответ

0 голосов
/ 12 февраля 2020

Родительский компонент должен также иметь:

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>
...