反应导航 - 标题上的填充底部不起作用

Question

在我的React-Native应用程序中，我的标题SearchBar中有一个图标和(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重叠的情况下放置paddingBottom？

Answer 1

对于ios，你需要设置背景Color.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 2

当我在我的设备上检查你的代码时，用padding正确查看。（https://i.stack.imgur.com/2VLNy.png）