React Navigation - 在标题上填充底部不起作用答案

【问题标题】：React Navigation - padding bottom on header not workingReact Navigation - 在标题上填充底部不起作用
【发布时间】：2019-07-25 01:03:30
【问题描述】：

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

以下代码：

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 重叠的情况下放置 paddingBottom？

【问题讨论】：

有机会看看stackoverflow.com/questions/45581440/…
尝试在导航选项中设置header 而不是headerTitle。您是否尝试过首先为当前使用的元素设置paddingTop。老实说，react-native 标头设置真的很痛苦。
@SubhenduKundu 我有。但是，它对我不起作用。
@buddhiv 我试过设置 paddingTop，但它根本没有任何效果。我目前正在尝试用header 代替它。确实，这让我很痛苦。
嗯，试试marginTop，有时可以。

标签： css react-native react-navigation statusbar searchbar

【解决方案1】：

要根据您的情况更改标题的填充，您需要更改 headerTitleContainerStyle 而不是 headerTitle。

例如：

headerTitleContainerStyle: { paddingVertical: 10 }

您仍然可以查看doc。

【讨论】：

【解决方案2】：

对于 ios，您需要设置 backgroundColor。以下代码都适用于 android ios。希望对您有所帮助。

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' },
});

【讨论】：

【解决方案3】：

当我在我的设备上检查您的代码时，它使用填充正确查看。

【讨论】：

我对 Android 上的标头没有任何问题。问题仅在 iOS 上。