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

编辑：

最后，我认为最好的方法是在组件树中进行一些修改，以使headerRowContainer项均为1的flex元素。这样，标题始终居中（视图具有相同的大小），我们可以现在可以在不影响其余按钮的情况下管理按钮的放置。它对我来说很完美。

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

React Native，Flex Box有问题

1 个答案: