android - WebStorm + React-Native : Navigator is deprecated and has been removed from this package

Question

我正在浏览 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”来运行应用程序时，我在模拟器窗口中收到以下错误:

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

Answer 1

在 React-Nav 0.44.3 中，导航器已被弃用:https://github.com/facebook/react-native/releases/tag/v0.44.3 ，所以真的不是 webstorm 的配置问题。

要解决此问题，您可以按照此 Github issue 进行操作, 通过 npm 或 yarn 安装 react-native-deprecated-custom-components 包。

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

从“react-native”导入 {Navigator};

与

从“react-native-deprecated-custom-components”导入 NavigationExperimental；

并将所有 Navigator 调用更改为 NavigationExperimenal.Navigator