Блог

всем доброго дня,

Я работаю над проектом react native, и я только что установил react-native-navigation модуль и следовал инструкциям, приведенным в документации.

Я сделал gradlew clean , чтобы очистить приложение перед запуском. как только я запустил приложение, я получаю пустой экран в эмуляторе Android и предупреждающее сообщение в консоли окна js debugger.

Не удается определить метод ‘getConstants()’ в NativeModule ‘RNNBridgeModule’. В NativeModule ‘RNNBridgeModule’ уже есть константа или метод с именем ‘getConstants’. Пожалуйста, удалите его.

это предупреждение, которое я продолжаю получать, когда ничего неправильного не отображается в консоли сервера 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 amp;amp; 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
        }
    })
}
  

Я надеялся, что у кого-нибудь из вас есть ответ на эту проблему, потому что я действительно не нашел ничего похожего на это за последний час поиска.

спасибо всем за ваше время и советы.

В моем случае создайте новый проект rn, и я последовалhttps://wix.github.io/react-native-navigation/#/docs/Installing инструкции, но без замены версий в build.gradle, и это работает для моего

@chawki challadia в последних версиях react-navigation вам также необходимо установить обработчик жестов (npm install —save react-native-gesture-handler), который упоминается здесьhttps://reactnavigation.org/docs/en/getting-started.html. Вот почему вы получаете предупреждение. Также не забудьте связать библиотеку обработчиков жестов с react-native ссылкой react-native-gesture-handler. Это должно работать нормально.