React Native google 自动完成搜索栏中的 iOS 灰色十字图标删除

Question

在我的 React Native 应用程序中，我正在使用 react-native-google-places-autocomplete 插件进行 google 搜索，因此在 iOS 中，默认情况下灰色图标出现在搜索栏中，用于取消检查栏下方图片 https://github.com/FaridSafi/react-native-google-places-autocomplete

我的代码如下

<GooglePlacesAutocomplete
  placeholder={props.placeholder}
  onPress={(data, details = null) => props.onPress(data, details)}
  onFail={(error) => console.error('error-->', error)}
  ref={ref}
  query={{
    key: '*****',
    language: 'en',
    region: 'ae',
    components: 'country:ae',
    types: 'geocode', // default: 'geocode'
  }}
  numberOfLines={1}
  fetchDetails={true}
  renderDescription={(row) => row.description}
  renderRightButton={() => (
    <TouchableOpacity onPress={() => ref.current?.setAddressText('')}>
      <View style={{ justifyContent: 'center', flex: 1, alignSelf: 'center' }}>
        <FastImage
          source={images.shippingAddress.cross_dark}
          style={{ width: 24, height: 24, marginRight: 10 }}
          resizeMode={'contain'}
        />
      </View>
    </TouchableOpacity>
  )}
  nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
  styles={{
    textInputContainer: {
      //   backgroundColor: 'red',
      marginLeft: 20,
      marginRight: 20,
      flexDirection: 'row',
      borderRadius: 30,
      borderColor: colors.white,
      borderWidth: 1,
      backgroundColor: colors.white,
    },
    textInput: {
      height: 40,
      color: colors.black,
      fontSize: globals.font_14,
      marginTop: 5,
      backgroundColor: 'white',
    },
    predefinedPlacesDescription: {
      color: colors.red,
    },
    poweredContainer: {
      marginRight: 20,
      marginLeft: 20,
    },
    row: {
      marginHorizontal: 20,
    },
    separator: {
      backgroundColor: '#c1bfc5',
      height: 0.7,
    },
  }}
/>

有什么方法可以从 google 组件中删除灰色取消图标？

Answer 1

您可以在 textInputProps 中使用 clearButtonMode 禁用它。

<GooglePlacesAutocomplete
...
  textInputProps={
    clearButtonMode: false,
  }
...
/>

React Native google 自动完成搜索栏中的 iOS 灰色十字图标删除

React Native google autocomplete search bar in iOS gray cross icon remove

google-maps

ios

searchbar

react-native

googleplacesautocomplete