css - React Navigation - 标题底部填充不起作用

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 重叠。

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

Answer 1

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

例如:

headerTitleContainerStyle: { paddingVertical: 10 } 

您仍然可以检查 doc .