React.jsReact-Native 开发阵营React Native开发

React Native 0.44版本后,Navigator使用

2017-11-29  本文已影响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的变量或方法,然后系统允许你为它取任意名字。

上一篇下一篇

猜你喜欢

热点阅读