不推荐使用React-Native Navigator,并且已从此程序包中删除

时间:2017-06-02 11:50:15

标签: react-native react-native-android react-native-ios react-navigation

我收到以下错误。

导航器已弃用,已从此程序包中删除。现在可以从 react-native-deprecated-custom-components 而不是react-native安装和导入它。在http://facebook.github.io/react-native/docs/navigation.html

了解替代导航解决方案

然后我会更新react-native-deprecated-custom-components包但问题未解决

的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
  }
});

任何人都让我知道解决这个问题

3 个答案:

答案 0 :(得分:8)

Ive use below code to fix my issue

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
  }
});

Any one let me know to solve this issue

I've change the lines

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

To

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

Fix my issue

答案 1 :(得分:3)

您现在应该使用Stack Navigator

import { StackNavigator } from 'react-navigation';

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

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

参考:https://reactnavigation.org/docs/intro/

答案 2 :(得分:0)

如果有人甚至不尝试使用Navigator时都看到了此消息,则可能是因为您有类似{p>

import

(尤其是Webstorm有自动插入这些内容的习惯)

这将为RN的所有出口调用import * as RN from 'react-native' ter,从而触发get的错误。而是使用:

Navigator