0

我不确定为什么在使用 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>
  </>
);
};
4

1 回答 1

0

我认为这是因为按钮按下功能（onPress 道具）在 JS 端。所以紧迫的部分发生在 JS 线程中。这就是当你点击按钮时 JS 帧丢失的原因。

于 2020-10-19T06:01:01.947 回答