React native framedrop在真实设备上，而不是在模拟器（IOS）上-React Native Reanimated

我有以下代码来创建“动态”文本输入。标签位于textinput上方。当textinput聚焦时，标签会移动到textinput上方，字体大小和颜色会发生变化。当textinput模糊时，标签向后移动（如果textinput中没有输入）

此代码包含

react native reanimated

代码，动画应该在UI线程而不是JS线程上工作

当我在IOS模拟器上测试这段代码时（测试的是iPhone 7->iPhone 11 Pro），我将注意力集中在文本输入上，这样动画就会运行，JS线程会下降大约3-6帧（54-57 fps），我想这是可以的。在真正的设备（iPhone7）上，JS线程会掉大约20-30帧（有时甚至更多）。当我开始输入textinput时，我得到一个缓慢的回调（我在输入时检查textinput的输入）。在模拟器上，回调会立即执行。在实际设备上，检查输入前有时需要2秒钟

import React, { useState, useEffect } from 'react';
import { View, TextInput } from 'react-native';
import Animated, { Easing, Extrapolate } from 'react-native-reanimated';
import { interpolateColor, useTimingTransition } from 'react-native-redash';
import Colors from '../../constants/Colors';

const { interpolate } = Animated;

const AuthenticationInput = React.forwardRef((props, ref) => {
  const {
    ref,
    label,
    onChangeText,
    secureTextEntry,
    returnKeyType,
    icon
  } = props;

  const [value, setValue] = useState('');

  const [trans, setTrans] = useState(0);

  const transition = useTimingTransition(trans, {
    duration: 250,
    easing: Easing.inOut(Easing.ease)
  });

  // move the label in the x direction
  const moveX = interpolate(transition, {
    inputRange: [0, 1],
    outputRange: [12.5, 0],
    extrapolate: Extrapolate.CLAMP
  });

  // move the label in the y direction
  const moveY = interpolate(transition, {
    inputRange: [0, 1],
    outputRange: [12.5, -20],
    extrapolate: Extrapolate.CLAMP
  });

  // change the font size of the label
  const fontSize = interpolate(transition, {
    inputRange: [0, 1],
    outputRange: [15, 12.5],
    extrapolate: Extrapolate.CLAMP
  });

  // change the color of the label
  const color = interpolateColor(transition, {
    inputRange: [0, 1],
    outputRange: ['#aaa', '#000']
  });

  // pass the input of the textinput to the
  // onChangeText function passed as a prop
  useEffect(() => {
    onChangeText(value)
  }, [value]);

  return (
    <View style={{
      marginHorizontal: 25,
      marginTop: 25,
      borderRadius: 5,
      backgroundColor: Colors.white
    }}
    >
      <Animated.View style={{
        position: 'absolute',
        transform: [{ translateX: moveX }, { translateY: moveY }]
      }}
      >
        <Animated.Text style={{
          fontSize,
          color
        }}
        >
          {label}
        </Animated.Text>
      </Animated.View>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <TextInput
          ref={ref}
          autoCapitalize="none"
          autoCompleteType="off"
          autoCorrect={false}
          secureTextEntry={secureTextEntry}
          onChangeText={(v) => setValue(v)}
          style={{
            margin: 0,
            padding: 12.5,
            flex: 1,
            fontSize: 15
          }}
          hitSlop={{
            top: 10,
            right: 10,
            bottom: 10,
            left: 10
          }}
          onFocus={() => setTrans(1)}
          onBlur={() => {
            if (value.length === 0) {
              setTrans(0);
            }
          }}
          returnKeyType={returnKeyType}
       />
        <View style={{ padding: 12.5 }}>
          {icon}
        </View>
      </View>
    </View>
  );
});

export default AuthenticationInput;

import React，{useState，useffect}来自“React”；
从“react native”导入{View，TextInput}；
从“react native reanimated”导入动画，{Easing，extraction}；
从“react native redash”导入{InterpolicoColor，useTimingTransition}；
从“../../constants/Colors”导入颜色；
常量{插值}=动画；
const AuthenticationInput=React.forwardRef（（props，ref）=>{
常数{
裁判，
标签，
一旦更改文本，
secureTextEntry，
返回键类型，
偶像
}=道具；
const[value，setValue]=使用状态（“”）；
const[trans，setTrans]=useState（0）；
常量转换=使用计时转换（trans{
时长：250，
放松：放松。输入输出（放松。放松）
});
//沿x方向移动标签
常量moveX=插值（转换{
输入范围：[0，1]，
输出范围：[12.5,0]，
外推：外推
});
//沿y方向移动标签
常量moveY=插值（转换{
输入范围：[0，1]，
输出范围：[12.5，-20]，
外推：外推
});
//更改标签的字体大小
常量fontSize=插值（转换{
输入范围：[0，1]，
输出范围：[15,12.5]，
外推：外推
});
//更改标签的颜色
常量颜色=插值颜色（转换{
输入范围：[0，1]，
输出范围：['aaa'，'000']
});
//将textinput的输入传递给
//onChangeText函数作为道具传递
useffect（（）=>{
onChangeText（值）
}，[价值]；
返回(
{label}
设置值（v）}
风格={{
保证金：0，
填充：12.5，
弹性：1，
尺寸：15
}}
hitSlop={{
前10名，
右:10,，
底部：10，
左：10
}}
onFocus={（）=>setTrans（1）}
onBlur={（）=>{
如果（value.length==0）{
setTrans（0）；
}
}}
returnKeyType={returnKeyType}
/>
{icon}
);
});
导出默认身份验证输入；