如何解决Flexbox容器固定在屏幕底部的问题

我希望实现一个组件，让“Open in GitHub”按钮贴近其余内容（目标效果如下）：

但实际应用中，按钮却卡在了屏幕底部：

我原本以为Flexbox会自动为子元素设置vertical-align: top属性，也尝试给子组件手动添加该属性，但毫无作用。

原JSX代码：

<>
  <View style={styles.container} testID="repositoryItem" >
    <View>
      <Image source={{ uri: repositories?.repository?.ownerAvatarUrl }} style={styles.image} />
    </View>
    <View>
      <Text style={styles.name}> {repositories?.repository?.fullName}</Text>
      <Text> {repositories?.repository?.description}</Text>
      <Text style={styles.language}> {repositories?.repository?.language} </Text>
    </View>
  </View>
  <View style={styles.container2}>
    <View>
      <Text style={styles.name}>{kFormatter(repositories?.repository?.stargazersCount)}</Text>
      <Text>Stars</Text>
    </View>
    <View>
      <Text style={styles.name}>{kFormatter(repositories?.repository?.forksCount)}</Text>
      <Text>Forks</Text>
    </View>
    <View>
      <Text style={styles.name}>{repositories?.repository?.reviewCount}</Text>
      <Text>Reviews</Text>
    </View>
    <View>
      <Text style={styles.name}>{repositories?.repository?.ratingAverage}</Text>
      <Text>Rating</Text>
    </View>
  </View>
  <View style={styles.container3}>
    <Pressable
      title="Open in GitHub"
      placeholder="Open in GitHub"
      onPress={onClick}
      testID="submitButton"
      style={{margin: 10, padding: 10, backgroundColor: 'lightblue'}}>
      <Text style={{ textAlign: 'center', color: 'white'}}>
        Open in GitHub
      </Text>
    </Pressable>
  </View>
</>

原样式代码：

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    justifyItems: 'start',
    minHeight: 0
  },
  container2: {
    display: 'flex',
    flexDirection: 'row',
    flexGrow: 1,
    minWidth: '100%',
    justifyContent: 'space-evenly'
  },
  container3: {
    display: 'flex',
    flexDirection: 'column',
    minWidth: '100%',
    minHeight: 0,
    justifyContent: 'space-evenly'
  },
  separator: {
    height: 10,
    backgroundColor: 'lightgrey'
  },
  image: {
    width: 50,
    height: 50,
    margin: 20
  },
  language: {
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: 'white',
    padding: 3,
    backgroundColor: 'blue',
    color: 'white',
    borderRadius: 5,
    alignSelf: 'flex-start'
  },
  name: {
    fontWeight: 'bold'
  }
});

解决方案 #

问题分析

当前三个顶级View没有统一的父Flex容器，各自独立布局；同时container2和container3设置的minWidth: '100%'会强制它们独占一行，加上页面可能的默认布局，导致按钮容器被挤到屏幕底部。

修改步骤

1. 给所有顶级View添加一个父容器，设置垂直Flex布局，让元素从上到下紧密排列。
2. 移除container2和container3的minWidth: '100%'，改为width: '100%'确保占满宽度但不破坏布局流。
3. 调整container3的布局属性，去掉不必要的justifyContent: 'space-evenly'，让按钮自然贴近上方内容。

修改后的代码

JSX代码：

<View style={styles.parentContainer}>
  <View style={styles.container} testID="repositoryItem" >
    <View>
      <Image source={{ uri: repositories?.repository?.ownerAvatarUrl }} style={styles.image} />
    </View>
    <View>
      <Text style={styles.name}> {repositories?.repository?.fullName}</Text>
      <Text> {repositories?.repository?.description}</Text>
      <Text style={styles.language}> {repositories?.repository?.language} </Text>
    </View>
  </View>
  <View style={styles.container2}>
    <View>
      <Text style={styles.name}>{kFormatter(repositories?.repository?.stargazersCount)}</Text>
      <Text>Stars</Text>
    </View>
    <View>
      <Text style={styles.name}>{kFormatter(repositories?.repository?.forksCount)}</Text>
      <Text>Forks</Text>
    </View>
    <View>
      <Text style={styles.name}>{repositories?.repository?.reviewCount}</Text>
      <Text>Reviews</Text>
    </View>
    <View>
      <Text style={styles.name}>{repositories?.repository?.ratingAverage}</Text>
      <Text>Rating</Text>
    </View>
  </View>
  <View style={styles.container3}>
    <Pressable
      title="Open in GitHub"
      placeholder="Open in GitHub"
      onPress={onClick}
      testID="submitButton"
      style={{margin: 10, padding: 10, backgroundColor: 'lightblue'}}>
      <Text style={{ textAlign: 'center', color: 'white'}}>
        Open in GitHub
      </Text>
    </Pressable>
  </View>
</View>

样式代码：

const styles = StyleSheet.create({
  parentContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch' // 让子元素占满宽度
  },
  container: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    justifyItems: 'start',
    minHeight: 0
  },
  container2: {
    display: 'flex',
    flexDirection: 'row',
    flexGrow: 1,
    width: '100%',
    justifyContent: 'space-evenly'
  },
  container3: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    minHeight: 0
  },
  separator: {
    height: 10,
    backgroundColor: 'lightgrey'
  },
  image: {
    width: 50,
    height: 50,
    margin: 20
  },
  language: {
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: 'white',
    padding: 3,
    backgroundColor: 'blue',
    color: 'white',
    borderRadius: 5,
    alignSelf: 'flex-start'
  },
  name: {
    fontWeight: 'bold'
  }
});

通过以上修改，所有元素会在垂直方向上紧密排列，按钮会自然贴近上方的统计内容，不再固定在屏幕底部。

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