反应本机搜索栏位置

Question

RN的新手。我正在显示Google地图和搜索栏。 问题是搜索栏位于状态栏下方。

如何至少将其调整为位于状态栏下方？

UploadPartResponse

Answer 1

如果此问题仅在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
    }
})

Answer 2

您可以使用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>