javascript - React Native，使用 Flex Box 时遇到问题

Question

我正在练习 React Native 编程，但我对 Flex 布局有一个问题，我似乎不太理解

我想让我的测试应用程序如下图所示

Sample App

但最终，这就是我得到的。 “主页”文本中存在一些错位，本应正确居中，并且两个右侧图标上缺少间隙。

Sample Test App

我尝试在两个图标上添加填充，但没有成功。

这是我的代码:

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 样式上的 marginTop。

编辑:

最后我认为最好的方法是在组件树中进行一些修改，使 headerRowContainer 项全部为 Flex 元素为 1。这样，标题始终居中( View 具有相同的大小)，我们可以现在管理按钮的位置而不影响其余部分。它非常适合我。

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
  }
});