Animiert: `useNativeDriver` war kein spezifiziertes Problem von ReactNativeBase Input

Lesezeit: 4 Minuten

Benutzeravatar von Supun Induwara
Supun Induwara

Ich habe heute (3. April 2020) ein neues React-Native-Projekt erstellt und eine Native-Basis hinzugefügt. Dann habe ich versucht, Eingaben mit dem Floating-Label hinzuzufügen. Es gibt eine Warnmeldung: Animiert: useNativeDriver wurde nicht angegeben. Dies ist eine erforderliche Option und muss explizit festgelegt werden true oder false. Wenn ich das Floating-Label-Attribut entfernt oder in StackedLabel geändert habe, ist die Warnung verschwunden. Während diese Warnung angezeigt wird, onChangeText wird nicht angerufen.

Warnmeldung

Komponentendatei

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

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

Benutzeravatar von AbolfazlR
AbolfazlR

Einfach hinzufügen useNativeDriver: true zur Animationskonfiguration.

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

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

AKTUALISIERT

Lösung:

Wie die Warnung sagt, müssen wir die angeben useNativeDriver Option explizit und setzen Sie sie auf true oder false .

1- Animationsmethoden

Beziehen auf Animiertes Dokument beispielsweise mit Animationstypen oder Kompositionsfunktionen, Animated.decay(), Animated.timing(),
Animated.spring(), Animated.parallel(), Animated.sequence()angeben useNativeDriver .

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

2- Animierbare Komponenten

Animated exportiert die folgenden animierbaren Komponenten mit dem obigen Wrapper:

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

Beim Arbeiten mit Animated.event() hinzufügen useNativeDriver: false/true zur Animationskonfiguration.

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

  • Hallo, darf ich wissen, wo ich das Animated.timing finden und bearbeiten kann?

    – Kaizen

    3. Juli 2020 um 9:37 Uhr

  • Sie können Ihrer Antwort nicht einfach eine weitere Antwort hinzufügen, ohne seinen/ihren Namen anzugeben

    – Nisharg Shah

    2. November 2020 um 13:47 Uhr

  • @Nisharg Shah – Das ist dein Recht, aber ich habe das auf github.com gelesen: github.com/GeekyAnts/NativeBase/issues/… Ich habe es aus meiner Antwort entfernt, als ich sagte, ich hätte das in Github gelesen

    – AbolfazlR

    2. November 2020 um 15:23 Uhr

  • Keine Probleme, aber Sie müssen den Namen angeben, wenn Sie Ihre Antwort aktualisieren, nachdem eine Person dieselbe Antwort in Ihrem Beitrag hinzugefügt hat. Deshalb habe ich Ihnen und diesen das normale Verhalten von SO mitgeteilt

    – Nisharg Shah

    2. November 2020 um 16:46 Uhr

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

    – AbolfazlR

    2. November 2020 um 22:15 Uhr

Benutzeravatar von Nisharg Shah
Nisharg Schah

Seit langem mit dem gleichen Problem konfrontiert und im Jahr 2021 noch kein Update von nativen Entwicklern.

Verwenden Sie in der Zwischenzeit eine Problemumgehung, um irritierende gelbe Warnungen zu vermeiden useNativeDriver.

AKTUALISIEREN SIE RN V0.63 OBEN

YellowBox wird nun geändert und durch ersetzt LogBox

FUNKTIONAL

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

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

KLASSENBASIERT

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

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

UPDATE RN V0.63 UNTEN

FUNKTIONAL

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

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

KLASSENBASIERT

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

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

  • Das hat mir weitergeholfen

    – Zeeshan Ahmad Khalil

    22. Oktober 2020 um 7:03 Uhr

  • was bedeutet funktional wo soll ich das hinzufügen? Würde das für alle Erscheinungen der Nachricht funktionieren?

    – Diego Rivera

    3. November 2020 um 2:28 Uhr

  • React ist in zwei Stilen geschrieben, funktionsbasiert und klassenbasiert, Sie müssen diesen Code dort hinzufügen, wo Sie diese Warnung ignorieren möchten

    – Nisharg Shah

    3. November 2020 um 2:44 Uhr

  • Idk, ich sage nur, es ist eine Warnung, und das Ausblenden der Warnung ist nicht dasselbe wie das Beheben der Warnung, ja? Aber ich werde die Warnung vorerst auch ausblenden, da sie noch nicht behoben ist.

    – Charitha Goonewardena

    25. Januar 2021 um 17:58 Uhr

  • Hat nicht funktioniert! Versucht, es der UI-Datei sowie der Testdatei hinzuzufügen.

    – cmcodes

    9. März um 12:35 Uhr

Scheint ein bekannter Fehler des aktuellen nativebase.io Release zu sein: https://github.com/GeekyAnts/NativeBase/issues/3109

Zusätzliche Info, worum es genau geht: https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

Verwenden Sie den folgenden Code, um die Warnmeldung von usenativedriver zu vermeiden

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

Beim Benutzen Animated.spring oder eine andere Animation angeben useNativeDriver: true von useNativeDriver: false.

Beispiel:

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

Das Animated.spring wird angerufen onPanResponderRelease Funktion.

Benutzeravatar von ziishaned
ziishaned

In React Native SDK 39 müssen Sie folgenden Code schreiben:

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

Benutzeravatar von Freewalker
Freewalker

native-base hat dies ab Januar behoben. Holen Sie sich mindestens v2.15.2

yarn add [email protected]^2.15.2

Versionshinweise: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

1430730cookie-checkAnimiert: `useNativeDriver` war kein spezifiziertes Problem von ReactNativeBase Input

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy