React Native中ScrollView内flex失效，子视图不显示问题咨询

嘿，我来帮你搞定这个问题～你遇到的情况是因为ScrollView的布局特性导致的：ScrollView本身是一个滚动容器，它的高度默认由内部内容的高度决定，而不是像普通View那样会撑满父容器的可用空间。所以直接在它的子View上使用flex属性时，因为没有明确的参考高度，flex比例无法计算，自然就看不到内容啦。

解决方法 #

我们只需要在ScrollView内部套一个根容器View，给这个根View设置flex:1，让它撑满ScrollView的全部可用空间，然后把所有需要使用flex布局的子元素放到这个根容器里，这样flex属性就能正常工作了。

修改后的代码示例 #

import React from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';

const App = (props) => {
  return (
    <ScrollView style={styles.body}>
      {/* 新增的根容器View，用来承载flex布局的子元素 */}
      <View style={styles.container}>
        <View style={styles.box1} />
        <View style={styles.box2} />
        <View style={styles.box1} />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#fff',
    borderColor: 'red',
    borderWidth: 5
  },
  // 新增的容器样式，撑满ScrollView的空间
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box1: {
    flex: 1,
    backgroundColor: 'blue',
  },
  box2: {
    flex: 2,
    backgroundColor: 'purple',
  }
});

export default App;

关键修改点解释 #

• 新增的container样式设置了flex:1，它会完全填充ScrollView的可用高度，给内部的box提供了明确的布局参考。
• 把原来直接放在ScrollView里的box移到这个container中，这样box的flex:1和flex:2就能基于container的高度来分配空间了——你会看到蓝色盒子占1份高度，紫色盒子占2份高度，完美实现预期的flex布局效果。

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