0
709
VistasAnimado: `useNativeDriver` no se especificó el problema de ReactNativeBase Input
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: no se especificó useNativeDriver . 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, no se llama a onChangeText .
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" ] } }11 Respuestas
Responde la pregunta0
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- aplicación
0
simplemente busque animation.timing en la carpeta ~\node_modules\native-base\dist\src\basic\ y agregue manualmente useNativeDriver: verdadero o falso
0
Simplemente agregue 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, debemos especificar la opción useNativeDriver explícitamente y establecerla en true o false .
1- Métodos de animación
Consulte el documento animado , con tipos de animación o funciones de composición, por ejemplo, Animated.decay() , Animated.timing() , Animated.spring() , Animated.parallel() , Animated.sequence() , especifique 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
Cuando trabaje con Animated.event() , agregue 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>0
En su mayoría, será una cuestión de encontrar todas las instancias de Animated.timing o Animated.spring y agregar useNativeDriver: true a la configuración.
0
Usando el componente de clase, simplemente agregue Animated.timing dentro componentDidMount() y defina useNativeDriver como verdadero o falso
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> ); } }0
Acabo de agregar esto en mi App.js y funcionó para mí :)
import { YellowBox } from 'react-native'; YellowBox.ignoreWarnings([ 'Animated: `useNativeDriver` was not specified.', ]);0
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 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`']); }0
Cuando utilice Animated.spring o cualquier otra animación, especifique useNativeDriver: true useNativeDriver: false .
Ejemplo:
Animated.spring(this.position, { toValue: { x: 0, y: 0 }, useNativeDriver: true, }).start(); Se llama a Animated.spring en la función onPanResponderRelease .
0
En reaccionar nativo SDK 39 tienes que escribir el siguiente código:
LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);0
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();0
native-base arregló esto a partir de enero. Obtenga al menos v2.15.2
yarn add native-base@^2.15.2
Notas de la versión: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2