WebStorm + React-Native : Navigator 已被弃用并已从此包中删除答案

【问题标题】：WebStorm + React-Native : Navigator is deprecated and has been removed from this packageWebStorm + React-Native : Navigator 已被弃用并已从此包中删除
【发布时间】：2017-07-23 20:04:15
【问题描述】：

我正在学习 lynda.com 上的 react-native 教程，“React-Native：构建移动应用程序”。不同之处在于我使用 WebStorm 开发基于 JavaScript 的应用程序。我根据教程创建了文件：

appContainer.js：

import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";

export default class AppContainer extends Component {
    constructor(props){
        super(props);
        this.state = {
            store: {},
            toggled: false,
            theme: null
        }
    }
    toggleDrawer(){
        this.state.toggled ? this._drawer.close() : this._drawer.open();
    }
    openDrawer(){
        this.setState({toggled: true});
    }
    closeDrawer(){
        this.setState({toggled: false});
    }
    renderScene(route, navigator){
        switch(route){
            default: {
                return null
            }
        }
    }
    configureScene(route, routeStack){
        return Navigator.SceneConfigs.PushFromRight;
    }
    render(){
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="displace"
                content={<View style={{backgroundColor: "#000", height: 1000}}
                />}
                onClose={this.closeDrawer.bind(this)}
                onOpen={this.openDrawer.bind(this)}
                openDrawerOffset={0.2}
                >
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={this.configureScene.bind(this)}
                    renderScene={this.renderScene.bind(this)}
                />
            </Drawer>
        );
    }
}

index.ios.js：

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import AppContainer from "./app/appContainer";

export default class dinder extends Component {
  render() {
    return (
      <AppContainer/>
    );
  }
}

AppRegistry.registerComponent('dinder', () => dinder);

运行/调试配置屏幕：

但是，当我通过从运行下拉窗口中选择运行“ios”来运行应用程序时，我在模拟器窗口中收到以下错误：

有人可以解释我如何在我粘贴的教程中提供的代码范围内解决这个问题吗？

【问题讨论】：

Navigator 确实已被弃用。我建议您找到更新的教程并开始使用一些新的导航库。像这样reactnavigation.org/docs/intro

标签： android ios node.js react-native webstorm

【解决方案1】：

在 React-Nav 0.44.3 中，Navigator 已被弃用：https://github.com/facebook/react-native/releases/tag/v0.44.3，所以实际上并不是 webstorm 的配置问题。

要解决这个问题，你可以关注这个Github issue，通过 npm 或 yarn 安装 react-native-deprecated-custom-components 包。

然后在你的 appContainer.js 中，替换你的

import { Navigator } from "react-native";

与

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

并将您所有的 Navigator 呼叫更改为 NavigationExperimenal.Navigator

【讨论】：