为什么在使用React Native Reanimated时JS线程会丢帧？

问题描述

我不确定在使用react-native-reanimated v2切换视图的高度时，为什么JS线程会掉帧吗？当我按下按钮时，JS帧大约为50-55，UI线程fps保持60。谢谢。

我的代码非常简单：

import React,{useEffect} from 'react';
import {
  Button,imagebackground,StatusBar,StyleSheet,Text,ViewStyle,} from 'react-native';
import Animated,{
  useAnimatedStyle,useSharedValue,withTiming,} from 'react-native-reanimated';

export const TestingScreen: React.FC<TestingScreenProps> = () => {

const height = useSharedValue(0);

const style = useAnimatedStyle(() => {
  return {
    height: withTiming(height.value),};
});

return (
  <>
    <StatusBar barStyle="dark-content" />
    <imagebackground
      style={styles.container}
      source={require('./../../../assets/images/cinema.jpg')}
      resizeMode={'cover'}>
      <Animated.View style={[styles.form,style]}>
        <View
          style={{
            width: 150,height: 150,backgroundColor: 'red',}}></View>
      </Animated.View>
      <Button
        title={'Toogle'}
        onPress={() =>
          (height.value =SCREEN_HEIGHT * Math.random())
        }
      />
      <Text
        style={{fontSize: 23,color: 'white',fontFamily: 'OpenSans-Italic'}}>
        TESTING
      </Text>
    </imagebackground>
  </>
);
};

解决方法

我认为这是因为按钮按下功能（onPress属性）在JS端。因此，紧迫的部分发生在JS线程中。这就是为什么当您按下按钮时JS框架掉落的原因。