给父容器设置flex: 1后，子容器ScrollView设置height不生效

最新推荐文章于 2025-01-17 13:43:39 发布

xiangjiu99287

最新推荐文章于 2025-01-17 13:43:39 发布

阅读量325

点赞数 5

文章标签： react native react.js javascript

本文链接：https://blog.youkuaiyun.com/xiangjiu99/article/details/144072039

版权

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

export default function Index() {
  return (
  <View style={{flex: 1}}>
    <ScrollView style={{height: 400}}>
      <View style={{backgroundColor: 'blue', height: 1000}}>
        <Text style={{color: 'white'}}>你好</Text>
      </View>
    </ScrollView>

    <Text style={{backgroundColor: 'red', color: 'white'}}>哈哈</Text>
  </View>
  )
}

原因

react native 0.73版本为NativeDirectionalScrollView设置了flexGrow: 1。由于‘哈哈’text并未设置flexGrow属性，所以NativeDirectionalScrollView会独占剩余空间，表现在屏幕上就如上图所示。

关于flexGrow属性原理可参考【css】flex弹性布局中的flex：1 到底是什么意思？_flex:1-优快云博客

解决方案

在ScrollView外层包一层view

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

export default function Index() {
  return (
  <View style={{flex: 1}}>
    <View>
      <ScrollView style={{height: 400}}>
        <View style={{backgroundColor: 'blue', height: 1000}}>
          <Text style={{color: 'white'}}>你好</Text>
        </View>
      </ScrollView>
    </View>
    <Text style={{backgroundColor: 'red', color: 'white'}}>哈哈</Text>
  </View>
  )
}