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.
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"
]
}
}
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
-
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.
ziishaned
En reaccionar nativo SDK 39 tienes que escribir el siguiente código:
LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);
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