美文网首页React.jsReact-Native 开发阵营React Native开发
React Native 0.44版本后,Navigator使用

React Native 0.44版本后,Navigator使用

作者: _海角_ | 来源:发表于2017-11-29 12:11 被阅读132次

    React Native 0.44 版本之后移除了Navigator,使用需要单独引入react-native-deprecated-custom-components

    1、npm install react-native-deprecated-custom-components --save
    
    2、import Navigator from 'react-native-deprecated-custom-components';
    

    3、用到的地方使用

       <Navigator.Navigator
                  initialRoute={{ name: defaultName, component: defaultComponent }}
                  configureScene={(route) => {
                    return Navigator.Navigator.SceneConfigs.VerticalDownSwipeJump;
                  }}
                  renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator} />
                  }} />
    

    4、千万记得使用Navigator.Navigator,我一直直接使用<Navigator></Navigator>,总是报错,

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    这表明没有找到Navigator组件,查了好半天才找到问题所在。

    5、或者使用这种方式:

    import CustomerComponents, {Navigator} from 'react-native-deprecated-custom-components';
    

    这样使用的时候,依旧可以使用 <Navigator></Navigator>

    2和5 对Navigator的两种引用方式,es6中模块化 'react-native-deprecated-custom-components' export defult 不是Navigator ,Navigator只是export ,因而第2步引用方式相当于 给 export default 的起了一个别名叫做Navigator ,会导致第4步的错误 。

    es6 模块化中规定, export default aaa,在import aaa时,不需要加{},而如果是export aaa 在 inport aaa时,则需要加{}
    export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。

    相关文章

      网友评论

      • 20f774bc0db2:2和5,两种引入方式,一种是react-native-deprecated-custom-components 作为整个Component引入,另一种是把其中的Navigator组件单独使用。

      本文标题:React Native 0.44版本后,Navigator使用

      本文链接:https://www.haomeiwen.com/subject/adeubxtx.html