时间戳

首页 > 解决方案 > 使用操作按钮时出现 Usenativedriver 错误 - 动画问题

react-native - 使用操作按钮时出现 Usenativedriver 错误 - 动画问题

问题描述

当我尝试添加操作按钮时出现此错误：

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`

我尝试以多种方式将其添加到我的代码中，但均未成功。谁能指出我如何为我的操作按钮添加它的好方向？

这是我加载按钮的页面：

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';

export class Main extends Component {
    render() {

        return (
            <View style={styles.container}>
            <View style={{alignItems: 'center'}}>
            <Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
            This is the main page, return to registration
            </Text>
            <View style={{height:5}}></View>
            </View>
            <View style={styles.FABContainer}>
            <ActionButton buttonColor="#c5e1a5">
                <ActionButton.Item 
                style={styles.actionButtonItem}
                buttonColor= '#c5e1a5'
                title="Add a thing" 
                onPress={() => console.log("notes tapped!")}
                >
                    <Icon name="md-create" style={styles.actionButtonIcon} />
                </ActionButton.Item>
            </ActionButton>
            </View>
            </View>
        )
    }
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
      <Tab.Navigator         
      tabBarOptions={{
        activeTintColor: 'black',
        inactiveBackgroundColor: '#c5e1a5',
        inactiveTintColor: 'gray',
        labelStyle: {fontSize: 14},
        style: 
        {
        backgroundColor: '#c5e1a5',
        borderTopColor: 'transparent',
        padding: 0,
        activeTabStyle: {
        fontWeight: 'bold',
        }
        },
        tabStyle: {
            borderRightColor: 'white',
            borderRightWidth: 1,
      }

      }}>


        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
  );
}

export default function BottomNav() {
    return (

        <MyTabs />

    );
  }

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor:'#ffffff',
        padding: 10,
        alignItems: 'stretch',
        justifyContent: 'space-around'
    },
    logoContainer: {
        height: 120,
        padding: 10,
        alignItems: 'center' ,
        justifyContent: 'flex-end' 
    },
    logo: {
        height: 50,
        width: 165
    },
    formContainer: {
        flex:1,
        alignItems: 'center' ,
        justifyContent: 'center' 

    },
    buttonContainer: {
    padding: 10, 
    marginBottom: 20, 
    width: 250, 
    alignItems: 'center', 
    backgroundColor: '#c5e1a5'
  },
    inputTextField: {
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 10, 
            height: 40, 
            width: 250,
            marginBottom: 10,
            fontSize: 16,
            borderBottomWidth : 1.0,
    },
    plainText: {
        fontSize: 16,
        marginBottom: 5,
        color: '#59616e',
        textDecorationLine: 'underline',
    },
    actionButtonIcon: {
        fontSize: 20,
        height: 22,
        color: 'white',
      },
      FABCcontainer: {
        height: 22,
    },
    actionButtonItem: {

    },
});

操作按钮的页面在这里：https ://openbase.io/js/react-native-action-button

谢谢你的帮助 。

蒂姆

标签： react-nativereact-animated

解决方案

  1. 跑yarn add -D replace-in-files-cli
  2. 在 package.json 上，添加替换脚本和安装后脚本：
{
  ...
  "scripts": {
    "replace:actionbutton": "yarn replace:actionbutton:stepone && yarn replace:actionbutton:steptwo && yarn replace:actionbutton:stepone && yarn replace:actionbutton:steptwo",
    "replace:actionbutton:stepone": "yarn replace-in-files --string='Animated.spring(this.anim, { toValue: 1 }' --replacement='Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }' node_modules/react-native-action-button/ActionButton.js",
    "replace:actionbutton:steptwo": "yarn replace-in-files --string='Animated.spring(this.anim, { toValue: 0 }' --replacement='Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }' node_modules/react-native-action-button/ActionButton.js",
    "postinstall": "yarn replace:actionbutton"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "replace-in-files-cli": "^1.0.0"
  }
}

提示：对需要在 node_modules 文件夹中修复的任何包中的任何修复执行此操作

推荐阅读