Блог

Я не уверен, почему поток JS удаляет фреймы, когда я переключаю высоту представления при использовании react-native-reanimated v2? Когда я нажимаю кнопку, кадры JS составляют около 50-55, а частота кадров в секунду потока пользовательского интерфейса остается 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 prop) находится на стороне JS. Итак, основная часть происходит в потоке JS. Вот почему фреймы JS удаляются при нажатии кнопки.