为 ScrollView 的 maxHeight 设置动画时组件闪烁（react-native）

Question

我有待办事项列表元素，可以通过按下相关按钮来展开和折叠。

通过按下 EXPAND 按钮，动画滚动视图的高度得到调整。展开时从 0 到 100，折叠时从 100 到 0。当我们同时展开两个列表对象时，屏幕开始闪烁。

这里是单个 todo-element 的代码（缩写，表示 DONE 按钮不在其中）：

import React, { useState, useRef, memo } from 'react';
import { Animated, Text, View, Button, ScrollView } from 'react-native';
import longText from '../data/data';

const ListObject = (props) => {
    
    //Object Expand and Collapse feature
    const expandValue = useRef(new Animated.Value(0)).current;
    const [expandState, setExpand] = useState(false);

    const expandAnimation = () => {
        Animated.timing(expandValue, {toValue: 100, duration: 1000, useNativeDriver: false}).start();
        setExpand(true);
    }
    
    const collapseAnimation = () => {
        Animated.timing(expandValue, {toValue: 0, duration: 1000, useNativeDriver: false}).start();
        setExpand(false);
    }


    return (
        <View style={{ margin: props.margin }}>
            <View style={{
               flexDirection: 'row',
               backgroundColor: 'grey',
               borderRadius: 10, 
            }}>

                <Button title='EXPAND' style={{
                    flex: 1,
                    backgroundColor: 'blue',
                }}
                onPress={ expandState ? collapseAnimation : expandAnimation }
                />
            </View>

            <Animated.ScrollView style={{ 
                flex: 1,
                paddingHorizontal: 40,
                backgroundColor: 'grey',
                borderRadius: 10,
                maxHeight: expandValue
             }}>
                <Text>{ props.text }</Text>              
            </Animated.ScrollView>

        </View>
    );


}


export default memo(ListObject);

这是应用程序的代码。为了收集所有待办事项元素，我映射一个列表并为每个元素分配一个键：

mport React, { useRef, useState } from 'react';
import { Animated, StyleSheet, ScrollView, Text, View, SafeAreaView, Button } from 'react-native';
import longText from './src/data/data';
import ListObject from './src/components/list-object'

const styles = StyleSheet.create({
  safeContainer: {
    flex: 1.2
  },
  headerContainer: {
    flex: 0.2,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: 'lightblue',
  },
  headerFont: {
    fontSize: 50,
    textAlign: 'center',
  },
  scrollContainer: {
    flex: 1 
  }
});


const App = () => {


    const numbers = [1,2,3,4,5,6,7,8,9];
    const listItems = numbers.map((number) => 
      <ListObject key={number.toString()} margin={10} headerText='I am the header of the to-do element' text={longText} />
    )



  return (

    <SafeAreaView style={ styles.safeContainer } >
      
      <View style={ styles.headerContainer }>
          <Text style={ [styles.headerFont] }>LIST MAKER</Text>
      </View>

      <ScrollView style={ styles.scrollContainer }>

      {listItems}

      </ScrollView>
    </SafeAreaView>
  
  
  );

};

export default App;

我期望没有闪烁。闪烁也出现在我的物理 Android 设备上。我搜索了类似的问题并检查了其他库如何实现它。

Answer 1

为此，您可以使用react-native-collapsible

import Accordion from 'react-native-collapsible/Accordion';

const [activeSections, setActiveSessions] = useState([])

const _updateSections = (activeSections) => {
    setActiveSessions(activeSections.includes(undefined) ? [] : activeSections)
  }

<Accordion
        sections={data}
        activeSections={activeSections}
        duration={400}
        renderHeader={_renderHeader}
        renderContent={_renderContent}
        onChange={_updateSections}
        touchableComponent={TouchableOpacity}
        renderAsFlatList={true}
        expandMultiple={true}
      />

为了获得更好的性能和流畅的体验，请使用这个。

Answer 2

我自己发现了错误，这是初学者的错误。

我不必在组件本身中管理组件的状态，而是必须将状态提升到父级。

这里是ReactJS 学习文档的链接。