React Native中如何用Flex实现一行内元素左右分别对齐？

要实现一行内第一个元素左对齐、第二个右对齐的效果，通过Flex布局有两种简洁的实现方式，具体如下：

方案一：父容器使用justifyContent: 'space-between' #

这是最直观的实现方式，给父容器设置该属性后，子元素会自动分布在容器的左右两端，中间区域自动留白。

import React from 'react';
import { View, Button } from 'react-native';

const AlignButtons = () => {
  return (
    <View style={{ 
      flexDirection: 'row', 
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      marginTop: 20
    }}>
      <Button title="左按钮" onPress={() => {}} />
      <Button title="右按钮" onPress={() => {}} />
    </View>
  );
};

export default AlignButtons;

方案二：给右侧元素设置marginLeft: 'auto' #

如果需要更灵活的布局控制（比如父容器内存在其他元素），可以给右侧元素添加marginLeft: 'auto'，这个值会让左侧的空白区域自动填充，从而将右侧元素推至容器最右端。

import React from 'react';
import { View, Button } from 'react-native';

const AlignButtons = () => {
  return (
    <View style={{ 
      flexDirection: 'row',
      paddingHorizontal: 16,
      marginTop: 20
    }}>
      <Button title="左按钮" onPress={() => {}} />
      <Button 
        title="右按钮" 
        onPress={() => {}}
        style={{ marginLeft: 'auto' }} 
      />
    </View>
  );
};

export default AlignButtons;

注意事项 #

• 父容器默认会占满父元素的宽度，一般无需额外设置width: '100%'，除非有特殊布局需求
• 可以通过调整父容器的paddingHorizontal属性，避免元素紧贴屏幕边缘

内容的提问来源于stack exchange，提问作者expoter