RN ScrollView支持动态高度,支持设置maxHeight

ScrollView如何设置高度?

RN里的ScrollView有两种高度设置方式

  1. 直接给ScrollView设置height: xxx
  2. 给父级View设置高度,给ScrollView设置flex: 1

如何动态适应内容高度,并限制最大高度呢?

  1. ScrollView自身设置flex: 1,父级View高度取state动态变化的值。
  2. 通过监听ScrollView的onContentSizeChange事件,拿到回调里的height。
  3. 取回调height和最大高度maxHeight的较小值,设置到父级View的高度state。

组件demo如下

/**
 * 动态高度ScrollView,支持设置最大高度
 * @author 凯尔宝宝
 * @date 2022/08/31
 */
import React, {
    useState } from 'react';
import {
    ScrollView, View } from 'react-native';

export default ({
     maxHeight

你可能感兴趣的:(React-Native,javascript,开发语言,ecmascript)