React Native自定义折叠面板

Question

我正在创建一个自定义折叠面板，该面板可以处理动态高度内容。它似乎在Android上正常工作（第一张图片），但是在IOS上，面板彼此重叠（第二张图片）。任何人都可以更正我的代码或为我指出正确的方向吗？

这是我的代码-我正在使用React Native 0.55.4

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, Animated, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class CollapsePanel extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstLoaded: true,
            expanded: false,
            minHeight: 0,
            maxHeight: 0,
            animation: new Animated.Value(),
        };
    }

切换方法更新expanded并计算initialValue的{​​{1}}和finalValue

Animated

toggle = () => { let { expanded, minHeight, maxHeight, animation } = this.state; let initialValue = expanded ? maxHeight + minHeight : minHeight; let finalValue = expanded ? minHeight : maxHeight + minHeight; this.setState({ ...this.state, firstLoaded: false, expanded: !expanded, }); animation.setValue(initialValue); Animated.timing(animation, { toValue: finalValue, delay: 100, duration: 200, }).start(); }; 设置折叠面板标题的高度

setMinHeight

setMinHeight = event => { this.setState({ ...this.state, minHeight: event.nativeEvent.layout.height, }); }; 设置折叠面板内容（子级）的高度。这个高度是动态的

setMaxHeight