我正在浏览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);
运行/调试配置屏幕:
但是,当我通过从运行下拉窗口选择运行'ios'来运行应用程序时,我在模拟器窗口中收到以下错误:
有人可以解释我如何在为我粘贴的教程提供的代码范围内修复此问题吗?
答案 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