React Native, возникли проблемы с Flex Box

Question

Я практикую свое программирование на React Native, и у меня есть проблема с Flex Layout, которую я не очень хорошо понимаю

Я хотел, чтобы мое тестовое приложение выглядело так, как показано ниже

Пример приложения

Но, в конце концов, это то, что я получаю. В тексте «Дом» есть некоторое смещение, которое должно быть правильно отцентрировано, и пропуски на двух правильных значках.

Пример приложения для тестирования

Я попытался поместить отступ на две иконки, но мне не повезло с.

Вот мой код:

import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <View style={styles.headerBrandingContainer}>
            <Text style={styles.headerBranding}>Brand</Text>
          </View>
          <View style={styles.headerRowContainer}>
            <Icon name="menu" size={30} color="white" />
            <Text style={styles.headerRowPage}>Home</Text>
            <View style={styles.headerRowIcons}>
              <Icon name="filter" size={30} color="white" />
              <Icon name="search" size={30} color="white" />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',

  },
  headerContainer: {
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center',
  },
  headerBrandingContainer: {
    marginTop: 50,
    alignItems: 'center',
  },
  headerBranding: {
    fontSize: 40,
    fontWeight: '400',
    letterSpacing: 1,
    color: '#fff',
  },
  headerRowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 10
  },
  headerRowIcons: {
    //backgroundColor: 'red',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  headerRowPage: {
    // marginLeft:20,
    fontSize: 25,
    fontWeight: '500',
    color: '#fff',

  }
});

Answer 1

Чтобы выровнять дочерние элементы headerContainer по вертикали, вы должны использовать alignItems с кодом ниже:

headerContainer: {
    display: 'flex',
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center',
    alignItems: 'center'
}

Полезный ресурс для понимания flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Удалите также вашу маржу в стилях headerBrandingContainer.

EDIT:

Наконец, я думаю, что лучший способ - это внести некоторые изменения в дерево компонентов, чтобы все элементы headerRowContainer были гибкими элементами к 1. Таким образом, заголовок всегда центрируется (представления имеют одинаковый размер), и мы можем Теперь управляйте размещением кнопок, не влияя на остальные. У меня отлично работает.

import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <View style={styles.headerBrandingContainer}>
            <Text style={styles.headerBranding}>Brand</Text>
          </View>
          <View style={styles.headerRowContainer}>
            <View style={styles.buttonsContainerLeft}>
              <Icon name="menu" size={30} color="white" />
            </View>
            <View style={styles.titleContainer}>
              <Text style={styles.headerRowPage}>Home</Text>
            </View>
            <View style={styles.headerRowIcons}>
              <Icon
                name="filter"
                size={30}
                color="white"
                style={styles.filterIcon}
              />
              <Icon name="search" size={30} color="white" />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  headerContainer: {
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center'
  },
  headerBrandingContainer: {
    marginTop: 50,
    alignItems: 'center'
  },
  headerBranding: {
    fontSize: 40,
    fontWeight: '400',
    letterSpacing: 1,
    color: '#fff'
  },
  headerRowContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10
  },
  buttonsContainerLeft: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerRowIcons: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'flex-end'
  },
  headerRowPage: {
    fontSize: 25,
    fontWeight: '500',
    color: '#fff'
  },
  filterIcon: {
    marginRight: 20
  }
});