Animado: `useNativeDriver` no se especificó el problema de ReactNativeBase Input

5 minutos de lectura

Avatar de usuario de Supun Induwara
Supun Induwara

Creé un nuevo proyecto nativo de reacción hoy (3 de abril de 2020) y agregué una base nativa. Luego traté de agregar entrada con la etiqueta flotante. Da un mensaje de advertencia: Animado: useNativeDriver no se especificó. Esta es una opción obligatoria y debe establecerse explícitamente en true o false. Si eliminé el atributo de etiqueta flotante o lo cambié a stackedLabel, la advertencia desapareció. Mientras aparece esta advertencia, onChangeText no se llama.

Mensaje de advertencia

Archivo de componentes

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>
    </>
  );
};

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

Avatar de usuario de AbolfazlR
AbolfazlR

Solo agrega useNativeDriver: true a la configuración de animación.

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

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

ACTUALIZADO

Solución:

Como dice la advertencia, necesitamos especificar el useNativeDriver explícitamente y configúrelo en true o false .

1- Métodos de animación

Referirse a documento animado con tipos de animación o funciones de composición, por ejemplo, Animated.decay(), Animated.timing(),
Animated.spring(), Animated.parallel(), Animated.sequence()especificar useNativeDriver .

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

2- Componentes animables

Animated exporta los siguientes componentes animables utilizando el contenedor anterior:

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

al trabajar con Animated.event() agregar useNativeDriver: false/true a la configuración de animación.

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

  • Hola, ¿puedo saber dónde encontrar y editar Animated.timing?

    – kaizen

    3 de julio de 2020 a las 9:37

  • no puede simplemente agregar otra respuesta en su respuesta sin especificar su nombre

    – Nisharg Shah

    2 de noviembre de 2020 a las 13:47

  • @Nisharg Shah – Tienes razón, pero lo leí en github.com: github.com/GeekyAnts/NativeBase/issues/… Lo eliminé de mi respuesta, como dije, lo leí en Github

    – AbolfazlR

    2 de noviembre de 2020 a las 15:23

  • No hay problema, pero debe especificar el nombre si actualiza su respuesta después de que alguna persona agregue la misma respuesta en su publicación, es por eso que le dije y este es el comportamiento regular de SO

    – Nisharg Shah

    2 de noviembre de 2020 a las 16:46

  • github.com/GeekyAnts/NativeBase/issues/…

    – AbolfazlR

    2 de noviembre de 2020 a las 22:15

Avatar de usuario de Nisharg Shah
Nisharg Shah

Enfrentando el mismo problema durante mucho tiempo y aún sin actualizaciones de los desarrolladores nativos en 2021.

Mientras tanto, use una solución alternativa para evitar irritantes advertencias amarillas de useNativeDriver.

ACTUALIZAR RN V0.63 ARRIBA

YellowBox ahora se cambia y se reemplaza con LogBox

FUNCIONAL

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

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

BASADO EN CLASE

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

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

ACTUALIZAR RN V0.63 ABAJO

FUNCIONAL

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

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

BASADO EN CLASE

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

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

  • Eso me ayudó

    – Zeeshan Ahmad Khalil

    22 de octubre de 2020 a las 7:03

  • que significa funcional donde debo agregar esto? ¿Funcionaría eso para todas las apariencias del mensaje?

    – Diego Rivera

    3 de noviembre de 2020 a las 2:28

  • React está escrito en dos estilos, basado en funciones y basado en clases, debe agregar ese código en esos, donde desea ignorar esas advertencias

    – Nisharg Shah

    3 de noviembre de 2020 a las 2:44

  • No sé, solo digo que es una advertencia y ocultar la advertencia no es lo mismo que corregir la advertencia, ¿sí? Pero también voy a ocultar la advertencia por ahora, ya que aún no está arreglada.

    – Charitha Goonewardena

    25 de enero de 2021 a las 17:58

  • ¡No funcionó! Intenté agregarlo al archivo de la interfaz de usuario y al archivo de prueba.

    – cmcodes

    9 de marzo a las 12:35

Parece ser un error conocido de la versión actual de nativebase.io: https://github.com/GeekyAnts/NativeBase/issues/3109

Información adicional, de qué se trata exactamente el problema: https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

use el siguiente código para evitar el mensaje de advertencia de usenativedriver

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

Cuando usas Animated.spring o cualquier otra animación especifica useNativeDriver: true de useNativeDriver: false.

Ejemplo:

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

los Animated.spring está siendo llamado onPanResponderRelease función.

avatar de usuario de ziishaned
ziishaned

En reaccionar nativo SDK 39 tienes que escribir el siguiente código:

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

Avatar de usuario de Freewalker
caminante libre

native-base arregló esto a partir de enero. Obtenga al menos v2.15.2

yarn add native-base@^2.15.2

Notas de lanzamiento: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

¿Ha sido útil esta solución?