如何让React Native中GooglePlacesAutocomplete样式与TextInput一致？

我正在React Native中使用react-places-autocomplete组件，希望将GooglePlacesAutocomplete的样式调整为与示例中的TextInput样式一致（图中上方为GooglePlacesAutocomplete，下方为TextInput）。现有代码如下：

const App = () => {
  return (
    <View>
      <GooglePlacesAutocomplete
        placeholder='Search'
        fetchDetails={true}
        onPress={(data, details) => {
          // console.log('data: ', data);
          console.log('details: ', details);
          alert(details.formatted_address)
        }}
        query={{
          key: '',
          language: 'en',
        }}
      />

      <Text>{'\n'}</Text>
      <Text>{'\n'}</Text>
      <Text>{'\n'}</Text>

      <TextInput
        placeholder='Search here....'
        style={{width:350,height:40,borderBottomColor:'black',borderBottomWidth:1,paddingLeft:10,fontSize:20}}
      />
    </View>
  );
};

export default App;

解决方案 #

你可以通过GooglePlacesAutocomplete提供的配置项，直接复用TextInput的样式，有两种实现方式：

方式一：使用styles对象自定义输入框样式 #

在组件的styles属性中，针对textInput字段设置和目标TextInput完全一致的样式：

<GooglePlacesAutocomplete
  placeholder='Search'
  fetchDetails={true}
  onPress={(data, details) => {
    console.log('details: ', details);
    alert(details.formatted_address)
  }}
  query={{
    key: '',
    language: 'en',
  }}
  styles={{
    textInput: {
      width: 350,
      height: 40,
      borderBottomColor: 'black',
      borderBottomWidth: 1,
      paddingLeft: 10,
      fontSize: 20
    }
  }}
/>

方式二：通过textInputProps传递样式 #

如果需要给输入框附加更多原生TextInput的属性，可通过textInputProps传递样式：

<GooglePlacesAutocomplete
  placeholder='Search'
  fetchDetails={true}
  onPress={(data, details) => {
    console.log('details: ', details);
    alert(details.formatted_address)
  }}
  query={{
    key: '',
    language: 'en',
  }}
  textInputProps={{
    style: {
      width: 350,
      height: 40,
      borderBottomColor: 'black',
      borderBottomWidth: 1,
      paddingLeft: 10,
      fontSize: 20
    }
  }}
/>

两种方式都能让GooglePlacesAutocomplete的输入框和目标TextInput样式完全匹配。如果后续需要调整组件其他区域（比如下拉建议列表），也可以在styles对象中添加container、listView等字段自定义样式。

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