- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我今天(2020 年 4 月 3 日)创建了一个新的 react-native 项目并添加了一个原生基础。然后我尝试使用 float 标签添加输入。它给出了一条警告消息:动画:useNativeDriver
未指定。这是一个必需选项,必须明确设置为 true
或 false
.如果我删除了 float 标签属性或将其更改为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
.
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>
关于javascript - 动画 : `useNativeDriver` was not specified issue of ReactNativeBase Input,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61014661/
我试图获取选项 useNativeDriver 设置为 true 的 animated.Value 的当前值,但它不起作用。对于将相同选项设置为 false 的其他动画值,它可以完美地工作。 最佳答案
我今天(2020 年 4 月 3 日)创建了一个新的 react-native 项目并添加了一个原生基础。然后我尝试使用 float 标签添加输入。它给出了一条警告消息:动画:useNativeDri
当我使用 useNativeDriver在 React Native 动画中 state = { chevronUp: new Animated.Value(-50), }; Animated
我想使用 native 驱动程序在 React Native 应用程序中处理动画。 我正在使用 Animated.FlatList , 我想定义 onScroll外render功能。 这是代码片段。
我正在使用 React Native(版本 0.59.10)构建一个项目。每当我运行测试(使用 Jest)时,我都会收到以下警告: console.warn node_modules/reac
我正在开发 expo SDK 版本:36,并且适用于所有平台(ios/android/web) 首次安装 react-navigation 时,如 documentation 中所述并在执行时运行 j
我是一名优秀的程序员,十分优秀!