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下方的填充。（我可以使用rn-status-bar-height中的getStatusBarHeight()获得距离值）

但是，如果我将paddingBottom: getStatusBarHeight()放在headerStyle上，则会得到以下结果：

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

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

Answer 1

对于ios，您需要设置backgroundColor。下面的代码适用于android ios和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' },
});

Answer 2

当我在设备上检查了您的代码后，是否可以通过填充正确查看代码。（https://i.stack.imgur.com/2VLNy.png）

Answer 3

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

例如：

headerTitleContainerStyle: { paddingVertical: 10 }

您仍然可以检查doc。

反应导航-标头底部填充不起作用

3 个答案: