React Native－關於 Goole places autocomplete 的樣式

套件懶人包。

簡述

在寫 React Native 時用了 react-native-google-places-autocomplete 這個套件，在設定 style 時碰到了一點障礙，所以就寫了這篇來解惑。

style 結構

首先結構可以想成是這樣，會比較好分析該怎麼寫 style：

const GooglePlacesAutocomplete = () => (
  <Container>
    <TextInputContainer>
      <TextInput />
    </TextInputContainer>
  </Container>
)

用圖來表示的話會像這樣：

這是預設的 style：

{
  container: {
    flex: 1,
  },
  textInputContainer: {
    flexDirection: 'row',
  },
  textInput: {
    backgroundColor: '#FFFFFF',
    height: 44,
    borderRadius: 5,
    paddingVertical: 5,
    paddingHorizontal: 10,
    fontSize: 15,
    flex: 1,
  },
}

這邊解釋幾個東西：

1. Container 為什麼要設成 flex: 1？

為了讓「搜尋結果」的空間可以展開（藍色區塊）：

2. 如果要加 icon 的話怎麼加？

可以用 renderLeftButton 來做，至於要設定排版的話，要注意是寫在 textInputContainer，而不是 container。

像這樣：

export default function SearchBar () {
  return (
    <View style={{ marginTop: 15, flexDirection: 'row' }}>
      <GooglePlacesAutocomplete
        styles={{
          container: {
            backgroundColor: 'dodgerblue'
          },
          textInputContainer: {
            flexDirection: 'row',
            alignItems: 'center', // 次軸置中
            backgroundColor: 'orange',
            marginRight: 10,
          },
          textInput: {
            backgroundColor: 'grey',
            borderRadius: 50,
          },
        }}
        // 左邊的 icon
        renderLeftButton={() => (
          <View>
            <MaterialIcons name="location-on" size={24} color="black" />
          </View>
        )}
      />
    </View>
  )
}