HarmonyOS RN动画卡顿？

Question

import React, { Component } from "react";
import { Animated, FlatList, Text, TouchableOpacity, View } from "react-native";
let maxY = 500;
let minY = 200;
class DemoPageAnimate extends Component {
  DATA = [];
  constructor(props) {
    super(props);
    this.top = maxY;
    this.topValue = new Animated.Value(this.top);
    for (let i = 0; i < 50; i++) {
      this.DATA.push({ title: "title : " + i });
    }
  }
  scrollAnimToBotton() {
    console.log("scrollAnimToBotton" + this.top + "xxxx" + maxY);
    // this.topValue.setValue(this.top);
    this.refs.topView && this.refs.topView.setNativeProps({
      style: {
        display: "flex",
      },
    });
    Animated.spring(this.topValue, {
      toValue: maxY, duration: 300, bounciness: 15, speed: 20, useNativeDriver: false,
    }).start(() => {
      console.log("=======start");
      this.top = maxY;
    });
  }
  scrollAnimToTOP() {
    console.log("scrollAnimToTOP" + this.top + "xxxx" + minY);
    this.refs.topView && this.refs.topView.setNativeProps({
      style: {
        display: "none",
      },
    });
    Animated.timing(this.topValue, {
      toValue: minY, duration: 200, useNativeDriver: false,
    }).start(() => {
      this.top = minY;
    });
  }
  render() {
    return <View style={{ width: "100%", height: "100%", backgroundColor: "#f00" }}>
      <TouchableOpacity style={{
        width: "100%", height: "10%", backgroundColor: "#fff", justifyContent: "center", alignItems: "center",
        marginTop: 10,
      }}
                        onPress={() => this.scrollAnimToTOP()}>
        <Text>弹出</Text>
      </TouchableOpacity>
      <TouchableOpacity style={{
        width: "100%", height: "10%", backgroundColor: "#fff", justifyContent: "center", alignItems: "center",
        marginTop: 10,
      }}
                        onPress={() => this.scrollAnimToBotton()}>
        <Text>弹下</Text>
      </TouchableOpacity>
      <Animated.View
        ref="scrollView"
        style={{
          zIndex: 2, position: "absolute", width: "100%", backgroundColor: "#0f0",
          top: this.topValue, height: 800,
        }}
      >
        <Text>AAAAAAA<View style={{ backgroundColor: "#00f" }}><Text>BBBBB</Text></View></Text>
        <FlatList
          style={{ width: "100%", height: 300 }}
          data={this.DATA}
          renderItem={(item) => {
            return (<Text style={{ height: 50, width: "100%" }}>{item.item.title}
              {/*加上这个View，动画会非常卡顿*/}
              <View><Text>-BBBBB</Text></View>
            </Text>);
          }}
          keyExtractor={item => item.id}
        />
      </Animated.View>
    </View>;
  };
}
module.exports = DemoPageAnimate;

当FlatList中的<Text\>嵌套<View\>时，动画会明显卡顿。

Answer 1

可以通过将createAndRegisterRNInstance的enableBackgroundExecutor设置成false来解决这个问题。