React native react native中的Flexbox对齐问题

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

在下面的代码段中，项是父视图，左图标和标题应该在左侧对齐，右箭头应该在右侧对齐

    <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>

---

这可能是一种不正确的方法，但如何实现这一点呢？

您可以使用

flexDirection:'row'

样式将

leftIcon

和

title

包装到视图中。 然后将

justifyContent:'spacebetween'

添加到您的

项目

样式中

示例（使用内联样式）：

A.
标题
> 

这确实让我走上了正确的方向，并且能够解决问题。非常感谢你！

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

        <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>