如何解决为什么在使用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框架掉落的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。