动画：`useNativeDriver` 未指定 ReactNativeBase 输入问题

Question

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

组件文件

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"
    ]
  }
}

Answer 1

似乎是当前 nativebase.io 版本的已知错误：https://github.com/GeekyAnts/NativeBase/issues/3109

其他信息，问题的具体内容：https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

Answer 2

只需在文件夹 ~\node_modules\native-base\dist\src\basic\ 上搜索 animated.timing 并手动添加 useNativeDriver: true 或 false

Answer 3

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

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

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

已更新

解法：

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

1-动画方法

参考Animated doc，有动画类型或合成功能，例如Animated.decay()，Animated.timing()， Animated.spring()、Animated.parallel()、Animated.sequence()、指定 useNativeDriver .

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

2- 动画组件

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

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

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

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

Answer 4

主要是找到 Animated.timing 或 Animated.spring 的所有实例并添加 useNativeDriver：符合配置。

Answer 5

使用 class 组件只需在 componentDidMount() 中添加 Animated.timing 并定义 useNativeDriver 为 true 或 false

class App extends Component {

    animatedValue = new Animated.Value(0);

    componentDidMount() {
        Animated.timing(this.animatedValue,
            {
                toValue: 1,
                duration: 1000,
                useNativeDriver: true
            }).start();
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.squareBG}/>
                <Animated.View style={[styles.square, {opacity: this.animatedValue}]}/>
            </View>
        );
    }
}

Answer 6

我刚刚将其添加到我的 App.js 中并为我工作:)

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Animated: `useNativeDriver` was not specified.',
]);

Answer 7

长期以来一直面临同样的问题，native-base 开发人员在 2021 年仍然没有更新。

同时使用变通方法避免 useNativeDriver.

的恼人黄色警告

更新上面的 RN V0.63

YellowBox 现已更改并替换为 LogBox

功能性

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}, [])

CLASS 基于

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}

更新下面的 RN V0.63

功能性

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}, [])

CLASS 基于

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}

Answer 8

当使用 Animated.spring 或任何其他动画时，请指定 useNativeDriver: true of useNativeDriver: false。

示例：

Animated.spring(this.position, {
    toValue: { x: 0, y: 0 },
    useNativeDriver: true,
}).start();

正在 onPanResponderRelease 函数中调用 Animated.spring。

Answer 9

在 React Native SDK 39 中，您必须编写以下代码：

LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);

Answer 10

使用下面的代码可以避免usenativedriver的警告信息

  Animated.timing(new Animated.Value(0), 
        {
          toValue: 1,
          duration: 500,
          easing: Easing.linear,
          useNativeDriver: false //make it as false
        }).start();

Answer 11

native-base 在 1 月份修复了这个问题。至少获得 v2.15.2

yarn add native-base@^2.15.2

发行说明：https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

动画：`useNativeDriver` 未指定 ReactNativeBase 输入问题

Animated: `useNativeDriver` was not specified issue of ReactNativeBase Input

javascript

reactjs

react-native

native-base

已更新

更新上面的 RN V0.63

更新下面的 RN V0.63