Animated: `useNativeDriver` не была указана проблема ввода ReactNativeBase

Question

Сегодня я создал новый собственный реактивный проект (3 апреля 2020 года) и добавил native-base. Затем я попытался добавить вход с плавающей меткой. Выдает предупреждение: Animated: useNativeDriver не указано. Это обязательный параметр, который должен быть явно установлен на true или false. Если я удалил атрибут floatLabel или изменил его на 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

просто добавьте 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();
}

Answer 2

Кажется, что это известная ошибка в текущем выпуске nativebase.io: https://github.com/GeekyAnts/NativeBase/issues/3109

Дополнительная информация, о чем конкретно проблема: https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how -do- я потребительное это-в-мое-приложение

Answer 3

Это в основном вопрос поиска всех экземпляров Animated.timing или Animated.spring и добавления useNativeDriver: true в конфигурацию.

Answer 4

просто найдите анимированный файл в папке ~ \ node_modules \ native-base \ dist \ src \ basic \ и добавьте вручную useNativeDriver: true или false