React Native中如何实现元素左右对齐？

你的核心问题在于容器宽度未撑满屏幕以及不必要的ScrollView嵌套导致justify-content: space-between无法生效，以下是两种解决方案：

方案一：移除ScrollView（推荐，AppBar通常无需滚动） #

直接用普通View作为flex容器，简化层级并确保宽度撑满屏幕：

import { View, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    paddingHorizontal: 10, // 左右内边距统一，布局更均衡
    paddingBottom: 20,
    backgroundColor: 'grey',
    width: '100%', // 强制容器撑满屏幕宽度
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold'
  },
  linkText: {
    color: 'white',
    fontSize: 16,
  },
  appBarContent: {
    flexDirection: 'row', // 横向排列子元素
    justifyContent: 'space-between', // 两端对齐核心属性
    alignItems: 'center', // 文本垂直居中
    width: '100%', // 确保内容容器撑满父容器
  }
});

const AppBar = () => {
  return (
    <View style={styles.container}>
      <View style={styles.appBarContent}>
        <Link to="/">
          <Text style={styles.text}>Repositories</Text>
        </Link>
        <Link to="/signin">
          <Text style={styles.linkText}>Sign In</Text>
        </Link>
      </View>
    </View>
  );
};

export default AppBar;

方案二：保留ScrollView（若需横向滚动扩展） #

如果必须保留ScrollView，需确保ScrollView及内部容器都撑满屏幕宽度：

import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    paddingHorizontal: 10,
    paddingBottom: 20,
    backgroundColor: 'grey',
    width: '100%',
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold'
  },
  linkText: {
    color: 'white',
    fontSize: 16,
  },
  scrollContainer: {
    width: '100%', // 让ScrollView撑满屏幕宽度
  },
  appBarContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%', // 内部内容容器也需撑满宽度
  }
});

const AppBar = () => {
  return (
    <View style={styles.container}>
      <ScrollView horizontal style={styles.scrollContainer}>
        <View style={styles.appBarContent}>
          <Link to="/">
            <Text style={styles.text}>Repositories</Text>
          </Link>
          <Link to="/signin">
            <Text style={styles.linkText}>Sign In</Text>
          </Link>
        </View>
      </ScrollView>
    </View>
  );
};

export default AppBar;

修改核心点说明 #

1. 强制宽度撑满：给外层容器和内容容器添加width: '100%'，解决React Native元素默认宽度为内容宽度的问题
2. 简化层级：移除不必要的嵌套View，减少flex属性冲突
3. 正确使用flex布局：通过flexDirection: 'row'和justifyContent: 'space-between'实现横向两端对齐

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