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

用户1790300

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

在此处输入图片说明

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

.comXY

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

要解决此问题,您可以关注此Github 问题通过 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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从 React Native Navigator 中删除标题?

来自分类Dev

React Native Android Navigator

来自分类Dev

React Native Navigator意外令牌

来自分类Dev

无法从React Native引用Navigator

来自分类Dev

从React Native中的renderScene函数(Navigator)获取状态

来自分类Dev

在Android上的React Native,Navigator中处理后退按钮

来自分类Dev

在React Native Navigator中在组件之间传递值

来自分类Dev

从React Native中的renderScene函数(Navigator)获取状态

来自分类Dev

在 WebStorm 中运行 React-native 项目时出错

来自分类Dev

无法在 WebStorm 中启动新的 React Native CLI 项目

来自分类Dev

React Native-Navigator递归子代崩溃

来自分类Dev

React Native Stack Navigator使用状态

来自分类Dev

React Native Drawer和Tab Navigator

来自分类Dev

导航问题 React native , stack navigator

来自分类Dev

WebStorm React Native 无法启动调试

来自分类Dev

React Native-“ react-native-interface.js”-WebStorm

来自分类Dev

React-Native <Navigator />:如何从实例化它的类中对其进行控制

来自分类Dev

TypeError:undefined不是在react-native-google-places-autocomplete中的对象(评估“ navigator.geolocation.getCurrentPosition”)

来自分类Dev

React.native中Stack.Screens之间的Stack.Navigator淡入淡出过渡?

来自分类Dev

如何在React-Native中设置Navigator的背景图像

来自分类Dev

React Native-使用ToolbarAndroid和Navigator的navigationBar

来自分类Dev

react-native Navigator(navbar)在Navbar下隐藏视图

来自分类Dev

在React Native中加载时的Stack Navigator问题

来自分类Dev

React Native Navigator场景的3D动画?

来自分类Dev

调用React Native Navigator后应用程序冻结

来自分类Dev

未定义的 navigator.push React-native 0.43.4

来自分类Dev

React Native Navigator:自定义组件不可见

来自分类Dev

React Native Navigation Reload Stack Navigator 主屏幕

来自分类Dev

在React Native上将Stack Navigator和Bottom Tab Navigator结合使用

Related 相关文章

  1. 1

    如何从 React Native Navigator 中删除标题?

  2. 2

    React Native Android Navigator

  3. 3

    React Native Navigator意外令牌

  4. 4

    无法从React Native引用Navigator

  5. 5

    从React Native中的renderScene函数(Navigator)获取状态

  6. 6

    在Android上的React Native,Navigator中处理后退按钮

  7. 7

    在React Native Navigator中在组件之间传递值

  8. 8

    从React Native中的renderScene函数(Navigator)获取状态

  9. 9

    在 WebStorm 中运行 React-native 项目时出错

  10. 10

    无法在 WebStorm 中启动新的 React Native CLI 项目

  11. 11

    React Native-Navigator递归子代崩溃

  12. 12

    React Native Stack Navigator使用状态

  13. 13

    React Native Drawer和Tab Navigator

  14. 14

    导航问题 React native , stack navigator

  15. 15

    WebStorm React Native 无法启动调试

  16. 16

    React Native-“ react-native-interface.js”-WebStorm

  17. 17

    React-Native <Navigator />:如何从实例化它的类中对其进行控制

  18. 18

    TypeError:undefined不是在react-native-google-places-autocomplete中的对象(评估“ navigator.geolocation.getCurrentPosition”)

  19. 19

    React.native中Stack.Screens之间的Stack.Navigator淡入淡出过渡?

  20. 20

    如何在React-Native中设置Navigator的背景图像

  21. 21

    React Native-使用ToolbarAndroid和Navigator的navigationBar

  22. 22

    react-native Navigator(navbar)在Navbar下隐藏视图

  23. 23

    在React Native中加载时的Stack Navigator问题

  24. 24

    React Native Navigator场景的3D动画?

  25. 25

    调用React Native Navigator后应用程序冻结

  26. 26

    未定义的 navigator.push React-native 0.43.4

  27. 27

    React Native Navigator:自定义组件不可见

  28. 28

    React Native Navigation Reload Stack Navigator 主屏幕

  29. 29

    在React Native上将Stack Navigator和Bottom Tab Navigator结合使用

热门标签

归档