React Navigation - нижний отступ на заголовке не работает - PullRequest
Новая
       14

React Navigation - нижний отступ на заголовке не работает

0 голосов
/ 03 марта 2019

В моем приложении React-Native у меня есть значок и Панель поиска в моем заголовке (из реагирующей навигации) .

Следующий код: 

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

выводит это:

Пока все хорошо.Тем не менее, я хочу иметь отступы ниже панели поиска.Другими словами, я хочу иметь расстояние от верхней части экрана до панели поиска в качестве отступа под панелью поиска.(Я могу получить значение расстояния, используя getStatusBarHeight() из rn-status-bar-height )

Однако, если я поставлю paddingBottom: getStatusBarHeight() в headerStyle, я получу этот результат:

enter image description here

По сути, теперь у меня есть заполнение, которое я хотел, однако StatusBar перекрывается с SearchBar.

Как поставить paddingBottom, не перекрывая StatusBar и SearchBar?

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Для 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' },
});
0 голосов
/ 03 марта 2019

когда я проверил твой код на моем устройстве, он правильно просматривается с отступами. (https://i.stack.imgur.com/2VLNy.png)

...