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

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

我正在阅读 lynda.com、"React-Native: Building Mobile Apps" 上的 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);

Run/Debug 配置屏幕:

但是,当我通过从 运行 下拉列表 windows 中选择 运行 'ios' 来 运行 应用程序时,我收到以下错误模拟器 window:

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

在 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 中替换您的

import { Navigator } from "react-native";

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

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