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

时间:2017-07-23 20:04:16

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

我正在浏览lynda.com上的反应原生教程,“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);

运行/调试配置屏幕:

enter image description here

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

enter image description here

有人可以解释我如何在为我粘贴的教程提供的代码范围内修复此问题吗?

1 个答案:

答案 0 :(得分:3)

在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