web-dev-qa-db-fra.com

React-Native Navigator est obsolète et a été supprimé de ce paquet.

Je reçois l'erreur suivante.

Navigator est obsolète et a été supprimé de ce paquet. Il peut maintenant être installé et importé à partir de react-native-deprecated-custom-components au lieu de react-native. En savoir plus sur les solutions de navigation alternatives à l’adresse http://facebook.github.io/react-native/docs/navigation.html

Ensuite, je mettrais à jour le paquet react-native-deprecated-custom-components mais le problème n'est pas résolu. 

Package.Json

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2",
    "react-native-deprecated-custom-components": "^0.1.0",
    "sendbird": "^3.0.30"
},

main.js

var React = require('react-native')
var {
  Navigator,
  StyleSheet
} = React;

var Login = require('./components/login');

import NavigationExperimental from 'react-native-deprecated-custom-components';

var ROUTES = {
  login: Login
};

module.exports = React.createClass({
  renderScene: function(route, navigator) {
    var Component = ROUTES[route.name];
    return <Component route={route} navigator={navigator} />;
  },
  render: function() {
    return (

      <NavigationExperimental.Navigator
        style={ styles.container }
        initialRoute={ {name: 'login'} }
        renderScene={this.renderScene}
        configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; } }
      />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Faites-le moi savoir pour résoudre ce problème

react-nativereact-native-androidreact-native-iosreact-navigation
6
Arunkumar

J'utilise le code ci-dessous pour résoudre mon problème

main.js

var React = require('react-native')
var {
  Navigator,
  StyleSheet
} = React;

var Login = require('./components/login');

import NavigationExperimental from 'react-native-deprecated-custom-components';

var ROUTES = {
  login: Login
};

module.exports = React.createClass({
  renderScene: function(route, navigator) {
    var Component = ROUTES[route.name];
    return <Component route={route} navigator={navigator} />;
  },
  render: function() {
    return (

      <NavigationExperimental.Navigator
        style={ styles.container }
        initialRoute={ {name: 'login'} }
        renderScene={this.renderScene}
        configureScene={ () => { return NavigationExperimental.Navigator.SceneConfigs.FloatFromRight; } }
      />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Faites-le moi savoir pour résoudre ce problème

J'ai changé les lignes

configureScene={ () => { return NavigationExperimental.Navigator.SceneConfigs.FloatFromRight; } }

À

configureScene={ () => { return NavigationExperimental.Navigator.SceneConfigs.FloatFromRight; } }

Résoudre mon problème

6
Arunkumar

Vous devez utiliser Stack Navigator maintenant 

import { StackNavigator } from 'react-navigation';

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

 <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />

référence: https://reactnavigation.org/docs/intro/

2
Ajay Venugopal

Si quelqu'un voit cela sans même essayer d'utiliser Navigator, c'est probablement parce que vous avez une ligne import comme

import * as RN from 'react-native'

(Webstorm en particulier a l'habitude de les insérer automatiquement)

Ceci appelle les getters pour toutes les exportations de RN, déclenchant l’erreur pour Navigator. Utilisez plutôt:

import {Things, You, Need} from 'react-native'

0
Rob Hogan