React Navigation - header 上的填充底部不起作用

Question

在我的 React-Native 应用程序中，我有一个图标和 SearchBar in my header (from react navigation)。

以下代码：

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle:
        <View style={{ flex: 1, flexDirection: "row", paddingHorizontal: 15, alignItems: "center" }}>
          <StatusBar default style={{ flex: 1, height: getStatusBarHeight() }} />
          <Icon name="chevron-left" size={28} />
          <SearchBar round platform={"default"} placeholder="Search" containerStyle={{
            flex: 1, backgroundColor: "transparent"
          }} />
        </View>,
      headerStyle: {
        backgroundColor: '#e54b4d',
      }
    };
}

输出这个：

到目前为止一切顺利。但是，我想在 SearchBar 下方填充。换句话说，我希望将屏幕顶部到 SearchBar 的距离作为 SearchBar 下方的填充。（我可以使用 getStatusBarHeight() 从 rn-status-bar-height 获得距离值）

但是，如果我将 paddingBottom: getStatusBarHeight() 放入 headerStyle，我会得到这样的结果：

基本上，现在我有了我想要的填充，但是，StatusBar 与 SearchBar 重叠。

如何在不使 StatusBar 和 SearchBar 重叠的情况下放置 paddingBottom？

Answer 1

当我在我的设备上检查你的代码时，它可以通过填充正确查看。

Answer 2

对于 ios，您需要设置 backgroundColor.Below 代码适合 android ios both.Hope 它可以帮助您。

import React, { Component } from 'react';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import {
  Modal,
  Button,
  View,
  Text,
  StyleSheet,
  StatusBar,
  Image,
  Platform,
} from 'react-native';
import { SearchBar, Icon } from 'react-native-elements';

export default class AssetExample extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle: (
        <View
          style={{
            flex: 1,
            backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
            alignItems: 'center',
            flexDirection: 'row',
            paddingHorizontal: 10,
            height: StatusBar.currentHeight,
          }}>
          <Icon name="chevron-left" size={28} />
          <SearchBar
            round
            platform={'default'}
            placeholder="Search"
            containerStyle={{
              flex: 1,
              backgroundColor: 'transparent',
            }}
          />
        </View>
      ),
      headerStyle: {
        backgroundColor: '#e54b4d',
      },
    };
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Answer 3

要更改 header 的填充，您需要更改 headerTitleContainerStyle 而不是 headerTitle。

例如：

headerTitleContainerStyle: { paddingVertical: 10 }

您仍然可以查看 doc。

React Navigation - header 上的填充底部不起作用

React Navigation - padding bottom on header not working

css

statusbar

searchbar

react-native

react-navigation