iOS端react-native-google-places-autocomplete搜索栏灰色取消图标如何移除

你可以通过给GooglePlacesAutocomplete组件传入textInputProps属性，禁用iOS端输入框自带的清除按钮来隐藏灰色取消叉号，该属性会直接透传给组件内部的React Native原生TextInput：

• 新增textInputProps字段，将其中的clearButtonMode设置为never即可完全移除iOS默认的清除按钮，你自定义的右侧清除按钮不受影响可以正常显示。

修改后的代码示例如下：

<GooglePlacesAutocomplete
  placeholder={props.placeholder}
  onPress={(data, details = null) => props.onPress(data, details)}
  onFail={(error) => console.error('error-->', error)}
  ref={ref}
  // 新增以下配置即可
  textInputProps={{
    clearButtonMode: 'never'
  }}
  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,
    },
  }}
/>

内容的提问来源于stack exchange，提问作者Harshal Kalavadiya