React Native Animated Flatlist项目扩展器不会触发视图的onLayout

如何解决React Native Animated Flatlist项目扩展器不会触发视图的onLayout

我正在尝试实现一个平面列表，可以在其中展开各项以显示其他数据。 我的问题是onLayout（）有时（〜一半的时间）不会给我内容的完整高度（不会返回大于0的高度=>无法显示其他数据）

这是我的自定义组件：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:views="clr-namespace:P205.Views"
        x:Class="P205.Views.MyTabbedPage">

<views:UnitsPage Title="Units" />
<views:EditUnitPage x:Name="editOrAddUnit" Title="Edit U"/>
<views:DBChangesPage Title="Edit DB"/>
<views:CoursesPage Title="Course"/> 

<ContentPage Padding="10">
    
</ContentPage>

这是单位列表：

import React from 'react';
import { View,Text,TouchableOpacity } from 'react-native';
import Animated,{ Easing } from 'react-native-reanimated';

const { Value,timing } = Animated;

export default class ResultElement extends React.Component {
 constructor(props) {
 this.state = {
      expanded: false,contentHeight: 0,};

    this._initContentHeight = this._initContentHeight.bind(this);
 }

 height = new Value(0);

 toggle() {
    timing(this.height,{
      toValue: this.state.expanded ? 0 : this.state.contentHeight,duration: 300,easing: Easing.inOut(Easing.ease),}).start();
    this.setState({ expanded: !this.state.expanded });
  }

  _initContentHeight(evt) {
    if (this.state.contentHeight > 0) return;
    const height = evt.nativeEvent.layout.height;
    this.setState({ contentHeight: height });
    this.height.setValue(this.state.expanded ? this.state.contentHeight : 0);
  }

  render() {
    const item = this.props.item;

    return (
      <View key={item.id}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity onPress={() => { this.toggle(); }}>
            <Text>Toggle content below</Text>
          </TouchableOpacity>
          <Animated.View style={[{ overflow: 'hidden' },{ height: this.height }]} onLayout={(evt) => this._initContentHeight(evt)}>
            <Text>Random Height content here</Text>
          </Animated.View>
        </View>
      </View>
    );
  }
}

有人可以解释为什么问题不会一直出现吗？

解决方法

由于我花了太多时间调试此问题而没有成功，所以我决定转储由此恢复的动画并使用react native的内置解决方案：

在屏幕上：

constructor(props) {
    super(props);
    this.state = {};

    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }
  }
}

我转储了平面列表，而是使用了scrollview

array.map((item) => (<CustomComp props={yourprops} />)).

在组件中，使用：

toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: !this.state.expanded });
}

...


{this.state.expanded &&
              <View>
                { item.type === 'driving' ? this._renderDrivingBody() :
                  item.type === 'point' ? this.renderPointBody() :
                    this.renderMinimumBody()}
              </View> }

仅此而已，希望它对以后的人有所帮助。