动画:`useNativeDriver` 不是 ReactNativeBase 输入的指定问题

问题描述

我今天(2020 年 4 月 3 日)创建了一个新的 react-native 项目并添加了一个 native-base.然后我尝试使用浮动标签添加输入.它给出了一条警告消息:动画:未指定 useNativeDriver.这是一个必需选项，必须显式设置为 true 或 false.如果我删除了浮动标签属性或将其更改为 stackLabel 警告消失了.出现此警告时，onChangeText 并未被调用.

I created a new react-native project today (April 3rd, 2020) and added a native-base. Then I tried to add input with the floating label. It gives a warning message: Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false. If I removed the floating label attribute or changed it to stackedLabel the warning disappeared. While this warning is appearing, onChangeText is not being called.

组件文件

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import {Input, Item, Label} from 'native-base';

import {Colors} from 'react-native/Libraries/NewAppScreen';

declare var global: {HermesInternal: null | {}};

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <Item floatingLabel>
              <Label>Test</Label>
              <Input onChangeText={text => console.log(text)} />
            </Item>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

package.json

{
  "name": "formtest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "native-base": "^2.13.12",
    "react": "16.11.0",
    "react-native": "0.62.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^1.0.0",
    "@types/jest": "^24.0.24",
    "@types/react-native": "^0.62.0",
    "@types/react-test-renderer": "16.9.2",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0",
    "prettier": "^2.0.2",
    "typescript": "^3.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}   

推荐答案

只需将 useNativeDriver: true 添加到动画配置中即可.

just add useNativeDriver: true to the animation config.

const [animatePress, setAnimatePress] = useState(new Animated.Value(1))

const animateIn = () => {
  Animated.timing(animatePress, {
    toValue: 0.5,
    duration: 500,
    useNativeDriver: true // Add This line
  }).start();
}

更新 1:

解决方案:

正如警告所说，我们需要明确指定 useNativeDriver 选项并将其设置为 true 或 false .

As the warning says, we need to specify the useNativeDriver option explicitly and set it to true or false .

1- 动画方法

参考Animated doc，有动画类型或合成函数，例如Animated.衰减(), Animated.timing(),Animated.spring()、Animated.parallel()、Animated.sequence()，指定useNativeDriver .

Refer to Animated doc , with animation types or composition functions, for example, Animated.decay(), Animated.timing(),Animated.spring(), Animated.parallel(), Animated.sequence(), specify useNativeDriver .

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Add this line
}).start();

2- 动画组件

Animated 使用上述包装器导出以下可动画组件:

Animated exports the following animatable components using the above wrapper:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

使用 Animated.event() 时，将 useNativeDriver: false/true 添加到动画配置中.

When working with Animated.event() , add useNativeDriver: false/true to the animation config.

<Animated.ScrollView
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // Add this line
  )}
>
  {content}
</Animated.ScrollView>

这篇关于动画:`useNativeDriver` 不是 ReactNativeBase 输入的指定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！