javascript - 动画：未指定`useNativeDriver`。这是一个必需选项，必须明确设置为 `true` 或 `false` #31

Question

我正在使用 React-Native-Draggable-View 将滑块添加到我的应用程序中，但是每次触摸滑块时，都会弹出上述错误。在进行故障排除时，它声称与动画/动画视图有关，但我的代码中没有动画视图。我进一步研究了文档，没有提到需要动画视图。我使用了钩子，文档使用类格式，所以我很难确定我在哪里/如何实现它。以下是我到目前为止所拥有的。

import React, { useState, useEffect, Component }from "react";
import {Alert, Dimensions, Platform, StyleSheet, Text, View, Button, TouchableOpacity, TouchableHighlight, SafeAreaView, ScrollView, ActivityIndicator, StatusBar} from "react-native";
import {ListScreen} from './ListScreen
import {CheckScreen} from './CheckScreen'
import Drawer from 'react-native-draggable-view'



function RunningScreen({navigation}) {
...

return(

...


<Drawer
    initialDrawerSize={0.3}
    finalDrawerHeight={0.5}

    //autoDrawerUp={0.5}
    renderContainerView={() => (
      <ListScreen navigation = {navigation} 

      
      />
    )}
    renderDrawerView={() => (
      
      <RunningScreen navigation = {navigation} />
    )}
      renderInitDrawerView={() => (
        <View style = {{alignItems: 'center'}}>
        <View style={{backgroundColor: '#d3d3d3', height: height*0.01, width: width*0.2, alignItems: 'center'}}>
        <StatusBar hidden={false} />
        </View>
        </View>

  )}

/>
    )
    }

...

export {RunningScreen}

Answer 1

您看到这个是因为react-native-draggable-view3 年内没有更新，并且您使用的是更新版本的 react-native。具体来说，> 0.62useNativeDriver需要指定。我猜这Animated.timing是图书馆打来的令人讨厌的电话。node_modules/react-native-draggable-view/index.js我会编辑那个块

Animated.timing(position, {
  toValue: endPosition,
  tension: 30,
  friction: 0,
  velocity: velocityY,
  useNativeDriver: false,
}).start();

看看错误是否消失。如果是这样，那么您可以修补软件包以包含该修复程序。如果您使用的是 yarn v2，则可以使用patch-package或yarn进行修补。

Answer 2

您正在使用没有 useNativeDriver true 或 false 的库“react-native-draggable-view”因此您需要打开库并在 Animated.timing 中应用“useNativeDriver: false”。

前 ：

 Animated.timing(position, {
        toValue: endPosition,
        tension: 30,
        friction: 0,
        velocity: velocityY
    }).start();

后 ：

 Animated.timing(position, {
        toValue: endPosition,
        tension: 30,
        friction: 0,
        velocity: velocityY,
        useNativeDriver: false
    }).start();

Answer 3

<Carousel
    layout={'tinder'}
    autoplay
    autoplayTimeout={5000}
    loop
    index={0}
    pageSize={BannerWidth}
>
    {images.map((image, index) => this.renderPage(image, index))}
</Carousel>