react-native 中的 Flexbox 对齐问题答案

【问题标题】：Flexbox alignment issue in react-nativereact-native 中的 Flexbox 对齐问题
【发布时间】：2020-12-13 15:26:43
【问题描述】：

我正在尝试将 View 组件的内容对齐到屏幕的左侧和右侧。不幸的是，无论我做什么，我都只能对齐父 View 而不能对齐子 View 组件。

在下面的sn-p中，item是Parent View，leftIcon和title 应该在左侧对齐，rightArrow 应该在右侧对齐。

    <TouchableOpacity onPress={() => navigation.navigate(`${item.page}`)}>
      <View style={styles.item}>
        <Text style={styles.leftIcon}>a</Text>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.rightArrow}> > </Text>
      </View>
    </TouchableOpacity>

const styles = StyleSheet.create({
  item: {
    //backgroundColor: '#f9c2ff',
    paddingTop: 7,
    marginVertical: 4,
    marginHorizontal: 16,
    flex: 1,
    flexDirection: 'row',
  },
  leftIcon: {
    fontSize: 25,
    paddingRight: '5%',
    alignSelf: 'flex-start',
  },
  title: {
    fontSize: 25,
    alignSelf: 'flex-start',
  },
  rightArrow: {
    fontSize: 25,
    alignSelf: 'flex-end'
  }
});

这可能是一种不正确的方法，但是可以做些什么来实现呢？

【问题讨论】：

标签： react-native flexbox expo

【解决方案1】：

您可以使用flexDirection: 'row' 样式将leftIcon 和title 包装在视图中。然后将justifyContent: 'space-between' 添加到您的item 样式中。

示例（使用内联样式）：

        <TouchableOpacity>
          <View
            style={{
              marginVertical: 4,
              marginHorizontal: 16,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <View style={{ flexDirection: 'row' }}>
              <Text
                style={{
                  fontSize: 25,
                  paddingRight: '5%',
                }}>
                a
              </Text>
              <Text style={{ fontSize: 25 }}>Title</Text>
            </View>
            <Text style={{ fontSize: 25 }}> > </Text>
          </View>
        </TouchableOpacity>

【讨论】：

这确实让我朝着正确的方向前进，并且能够解决问题。非常感谢！