如何在 React Native 中修复 "unable to find method 'getConstants()'"

Question

大家好，

我正在做一个 React Native 项目，我刚刚安装了 react-native-navigation 模块并按照文档提供的说明进行操作。

我在开始前做了 gradlew clean 清理应用程序。启动应用程序后，我在 android 模拟器上看到一个空白屏幕，在 js 调试器 window.

的控制台中收到一条警告消息

Unable to define method 'getConstants()' on NativeModule 'RNNBridgeModule'. NativeModule 'RNNBridgeModule' already has a constant or method called 'getConstants'. Please remove it.

这是我在终端打开的 Metro 服务器控制台中不断收到的警告，没有任何错误。

这是我到目前为止创建的组件：

import React from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  StyleSheet,
  Dimensions
} from "react-native";
import Icon from 'react-native-vector-icons/MaterialIcons'
import { colors, fontSizes, dimensions } from '../../styles/base.js';
import showToast from '../generic/Toast';

export default class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: ''
    }
  }

  render() {
    return (
      <View style={styles.login}>
        <Image 
          source={require('../../img/logo.png')}
          style={styles.img}
          resizeMode="contain"
          resizeMethod="scale"
        />
        <TextInput

          onChange={uname => this.setState({ username: uname })}
          placeholder={"Username"}
          style={styles.input}
        />
        <TextInput
          onChange={pwd =>
            this.setState({
              password: pwd
            })
          }
          placeholder={"Password"}
          style={[styles.input, styles.password]}
          secureTextEntry={true}
        />
        < TouchableOpacity onPress = {
          () => {/*showToast({
            msg: dimensions.fl + " " + dimensions.fw
          })*/
          console.log("height: "+ dimensions.fl);
          console.log("width: "+ dimensions.fw);
          }} >
          <Text style={styles.btn}>Login</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => console.log("settings...")} style={styles.iconBtn}>
          <Icon name="settings" size={35} style={styles.icon} />
        </TouchableOpacity>
      </View>
    );
  }
}

let width,mbi,mtb,mtp;
if(dimensions.fw <= 568) {
  width = "90%";
  mbi = 10;
  mtb = 15;
  mtp = 10;
  fontSize = fontSizes.textSizeSmall;
} else if (dimensions.fw > 586 && dimensions.fw <= 768) {
  width = "80%";
  mbi = 20;
  mtb = 25;
  mtp = 20;
  fontSize = fontSizes.textSizeMedium;
} else if (dimensions.fw > 768) {
  width = "65%";
  mbi = 60;
  mtb = 35;
  mtp = 30;
  fontSize = fontSizes.textSizeLarge
}

const styles = StyleSheet.create({
  login: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: colors.sky
  },
  input: {
    height: 55,
    width,
    borderBottomWidth: 1,
    borderBottomColor: colors.red,
    fontSize
  },
  password: {
    marginTop: mtp
  },
  btn: {
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 40,
    paddingRight: 40,
    color: colors.light,
    backgroundColor: colors.darksky,
    fontSize,
    marginTop: mtb
  },
  img: {
    width: "80%",
    height: "50%",
    marginBottom: mbi,
    marginTop: "-8%"
  },
  icon: {
    marginRight: 25,
    marginBottom: 15,
    color: colors.dark
  },
  iconBtn: {
    alignSelf: "flex-end",
    position: "absolute",
    bottom: 0
  }
});

import React, { Component } from 'react';
import Toast from 'react-native-root-toast';

export default showToast = (props) => {
    return Toast.show(props.msg, {
        duration: Toast.durations.LONG,
        position: Toast.positions.BOTTOM,
        shadow: true,
        hideOnPress: true,
        animation: true,
        delay: 500,
        backgroundColor: props.backgroundColor || "black",
        shadowColor: props.shadowColor || "gray",
        textColor: props.textColor || "white",
        containerStyle: {
            width: "100%",
            borderRadius: 0,
            paddingBottom: 10
        }
    })
}

我希望你们中的一个人能找到这个问题的答案，因为在过去一个小时的搜索中我并没有真正找到任何类似的东西。

谢谢大家的时间和建议。

Answer 1

@chawki challadia 以及最新版本的 react-navigation，您还需要安装手势处理程序（npm install --save react-native-gesture-handler），这在此处 https://reactnavigation.org/docs/en/getting-started.html 中提到。这就是你收到警告的原因。也不要忘记 link 带有 react-native link react-native-gesture-handler 的手势处理程序库。它应该可以正常工作。

Answer 2

在我的例子中，创建了一个新的 rn 项目，我遵循了 https://wix.github.io/react-native-navigation/#/docs/Installing 的说明，但没有替换 build.gradle 中的版本，它适用于我的

如何在 React Native 中修复 "unable to find method 'getConstants()'"

how to fix "unable to find method 'getConstants()'" in react native

android

react-native

react-native-navigation