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

【问题标题】：Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false` #31动画：未指定`useNativeDriver`。这是一个必需选项，必须明确设置为 `true` 或 `false` #31
【发布时间】：2021-03-07 17:05:20
【问题描述】：

我正在使用 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}

【问题讨论】：

标签： javascript react-native react-hooks use-state react-native-draggable-flatlist

【解决方案1】：

您正在使用库“react-native-draggable-view”，它没有 useNativeDriver true 或 false 所以您需要打开库并在 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();

【讨论】：

这很有帮助，但我收到的共识是我不应该使用这个库，因为它没有更新。我没有在文档上看到警告说它没有被维护，所以我继续前进。我很欣赏你的洞察力。您还有其他推荐的图书馆吗？我之前使用过 React-Native-Reanimated-Bottom-Sheet，但它并没有完全满足我的需求。

【解决方案2】：

您看到这个是因为 react-native-draggable-view 已经 3 年没有更新了，而且您正在使用更新版本的 react-native。具体来说，> 0.62 需要指定 useNativeDriver。我猜this 是来自图书馆的有问题的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 进行修补。

【讨论】：

你会建议不要使用这个库吗？
是的，我不会使用它。主要是因为它似乎不再被维护，你可能会遇到类似的问题。该库使用 componentWillReceiveProps 生命周期方法，新版本的 React 将不支持该方法。这意味着您必须摆脱该库才能升级到最新版本的 React。现在最好这样做。
你有推荐的图书馆吗？我之前使用过 React-Native-Reanimated-Bottom-Sheet，它并没有完全满足我的需要，但我可能只是需要更多地使用它
没什么可推荐的，不。我可能会直接使用 react-native 中的 Animated 而不是使用库。

【解决方案3】：

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

【讨论】：