Реагировать на позицию собственного поиска

Question

Новый для RN. Я показываю карту Google и панель поиска. Проблема в том, что строка поиска находится под строкой состояния.

Как я могу настроить его как минимум ниже строки состояния?

<View>
        <StatusBar backgroundColor="rgba(1.0, 0, 0, 0.2)" translucent />
        <SearchBar
          ref='searchBar'
          placeholder='Find me'
          barStyle="black"
          showsCancelButtonWhileEditing={false}
        />
        <MapView
          provider={ PROVIDER_GOOGLE }
          style={ styles.container }
          initialRegion={{
            latitude: 32.815013,
            longitude: -117.273404,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>

Answer 1

Вы можете использовать SafeAreaView

Просто оберните весь вид с SafeAreaView. Он автоматически добавляет пространство на устройствах IOS.

<SafeAreView style={{flex:1}}>
<View>
        <StatusBar backgroundColor="rgba(1.0, 0, 0, 0.2)" translucent />
        <SearchBar
          ref='searchBar'
          placeholder='Find me'
          barStyle="black"
          showsCancelButtonWhileEditing={false}
        />
        <MapView
          provider={ PROVIDER_GOOGLE }
          style={ styles.container }
          initialRegion={{
            latitude: 32.815013,
            longitude: -117.273404,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
</SafeAreaView>

Answer 2

Если эта проблема повторяется только в iOS, вы можете проверить платформу, чтобы применить правильный стиль.

<View style={styles.containerStyle}>
    <StatusBar backgroundColor="rgba(1.0, 0, 0, 0.2)" translucent />
    <SearchBar
      ref='searchBar'
      placeholder='Find me'
      barStyle="black"
      showsCancelButtonWhileEditing={false}
    />
    <MapView
      provider={ PROVIDER_GOOGLE }
      style={ styles.container }
      initialRegion={{
        latitude: 32.815013,
        longitude: -117.273404,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
</View>

const styles = StyleSheet.create({
    containerStyle: {
        marginTop: Platform.OS === 'iOS' ? 20 : 10
    }
})