애니메이션: ReactiveNativeBase 입력의 "NativeDriver"가 지정되지 않음

애니메이션: ReactiveNativeBase 입력의 "NativeDriver"가 지정되지 않음

오늘(2020년 4월 3일) 새로운 리액티브 프로젝트를 만들고, 토착기반을 추가했다.그리고 부동 레이블로 입력을 추가하려고 했다.다음과 같은 경고 메시지가 표시된다.애니메이션:useNativeDriver지정되지 않았다.이 옵션은 필수 옵션이며 다음으로 명시적으로 설정되어야 함true또는false. floating label 속성을 제거하거나 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>
    </>
  );
};

꾸러미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"
    ]
  }
}   

추가하기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();
}

업데이트됨

해결책:

경고에 따르면, 우리는 다음 사항을 명시할 필요가 있다.useNativeDriver명시적으로 옵션 및 설정true또는false.

1- 애니메이션 방법

애니메이션 유형 또는 구성 기능이 있는 애니메이션 문서를 참조하십시오.Animated.decay(),Animated.timing(),Animated.spring(),Animated.parallel(),Animated.sequence(), 지정useNativeDriver.

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

2- 애니메이션 적용 가능한 구성 요소

Animated위의 래퍼를 사용하여 다음과 같은 애니메이션 적용 가능한 구성 요소 내보내기:

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

작업할 때Animated.event()덧셈을useNativeDriver: false/true애니메이션 구성으로 이동하십시오.

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

오랜 기간 동일한 문제에 직면했지만 2021년에는 아직 네이티브 기반 개발자들의 업데이트가 없다.

한편, 다음과 같은 자극적인 노란색 경고를 방지하기 위해 해결 방법을 사용하십시오.useNativeDriver.

업데이트 RN V0.63 위

YellowBox이제 변경되고 다음으로 교체됨LogBox

기능적

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

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

클래스 기반

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

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

아래 RN V0.63 업데이트

기능적

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

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

클래스 기반

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

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

현재 nativebase.io 릴리즈: https://github.com/GeekyAnts/NativeBase/issues/3109의 알려진 버그인 것 같다.

추가 정보, 정확히 어떤 문제인지: https://reactnative.dev/blog/2017/02/14/native-native-on-driver-for-i-use-in-my-app 사용

사용시Animated.spring또는 다른 애니메이션 지정useNativeDriver: true의useNativeDriver: false.

예:

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

그Animated.spring호출되고 있다onPanResponderRelease기능을 발휘하다

다음 코드를 사용하여 강 유역의 경고 메시지를 피하다.

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

토박이 이것을 1월부로 고쳤다.v2.15.2 이상 가져오기

yarn add native-base@^2.15.2

릴리스 정보: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

이는 대부분 애니메이션.timing 또는 Animal.spring의 모든 인스턴스를 찾고 useNativeDriver: 구성을 참으로 추가하는 문제가 될 것이다.

클래스 구성 요소를 사용하는 경우Animated.timing안쪽에componentDidMount()그리고 정의하다useNativeDriver사실인지 거짓인지

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

이거 그냥 내 안에 넣었어.App.js그리고 나를 위해 일했다 :)

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Animated: `useNativeDriver` was not specified.',
]);

기본 SDK 39 reactive에서는 다음 코드를 작성해야 한다.

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

animated.timing on folder ~\node_modules\native-base\dist\src\basic\에서 검색한 후 수동으로 nativeDriver: true 또는 false를 추가하십시오.

참조URL: https://stackoverflow.com/questions/61014661/animated-usenativedriver-was-not-specified-issue-of-reactnativebase-input