第四篇React-Native布局实战(二) 问题

[godjarl]

您好，最近在学习React Native时找到了您给的入门教程，衷心对您表示感谢。目前遇到一点困难，如果您有时间帮我解答一下，十分感谢。

根据教程中的内容step by step，在npm添加react-native-swiper之后（您教程中给出的安装命令是npm react-native-swiper --save，不是很理解，我改成了npm install react-native-swiper --save），在添加了var Slider = React.createClass({...})代码之后，刷新模拟器报错：requiring unkown module "react-timer-mixin "。随后我手动使用npm安装了react-timer-mixin，错误依旧存在。

感谢。

[vczero]

不好意思啊，这块需要更新下,正确命令如下： (1)安装依赖库 $ npm install react-native-swiper --save $ npm i react-timer-mixin --save

(2)需要关闭React packager命令行和模拟器，在xcode中重启项目

[MacLeek]

发现react-native-swiper的作者一直没有更新npm，而且即使用的他git仓库里面的也不行。找到一个老外fork的npm install react-native-swiper-fork --save，测试可用。

[vczero]

其实react-native-swiper 代码比较简单，可以修改后使用。公司内部我们都是自己修改后再使用，复杂的scrollView都是自己开发。

[imwangxuesen]

作者，你好，我也在这个地方发现了问题， uncaught error Error: UnableToResolveError: Unable to resolve module Dimensions from /Users/WangXuesen/HelloWorld2/node_modules/react-native-swiper/dist/index.js: Invalid directory /Users/node_modules/Dimensions 这个dimensions的路径引用是有问题的，我在overflow上找个解决了类似问题的coder的贴子，试着模仿他的修改方法，但是对react-native-swiper 中的 index.js 中的 var _Dimensions2 = _interopRequireWildcard(_Dimensions);不太懂， 希望作者帮我解决这个问题 ，附上 overflow 的链接：http://stackoverflow.com/questions/33994745/error-in-react-native-parallax-view

[imwangxuesen]

突然发现楼上说的很对，我改成楼上的那个组件就没问题了，作业还是改了吧，不然对初学者太残忍了

[vczero]

刚刚给你修改了下react-native-swiper。
https://github.com/vczero/react-native-lesson/blob/master/react-native-swiper.js
你把这个文件拷贝到react-native-swiper/dist下。
然后修改package.json 中的：
"main": "dist/react-native-swiper.js"
即可。

[vczero]

stackoverflow的意思是需要引入Dimensions API

var Dimensions = require('Dimensions'); //获取屏幕的宽高 var { width, height } = Dimensions.get('window');

[imwangxuesen]

谢谢，作者666，持续关注了，希望能够尽快看到你的最后三章，看好你哦，

在 2015年12月9日，下午4:29，vczero [email protected] 写道：

刚刚给你修改了下react-native-swiper。

https://github.com/vczero/react-native-lesson/blob/master/react-native-swiper.js https://github.com/vczero/react-native-lesson/blob/master/react-native-swiper.js

你把这个文件拷贝到react-native-swiper/dist下。

然后修改package.json 中的：

"main": "dist/react-native-swiper.js"

即可。

— Reply to this email directly or view it on GitHub https://github.com/vczero/react-native-lesson/issues/6#issuecomment-163149257.

[makao007]

这里有个解决方法： https://github.com/leecade/react-native-swiper/issues/31 修改node_modules/react-native-swiper/dist/index.js文件 update from

var _Dimensions = require('Dimensions');
var _Dimensions2 = _interopRequireDefault(_Dimensions);
var _Dimensions$get = _Dimensions2['default'].get('window');

to

var React = require('react-native');
var {
  Dimensions
} = React;
var {width, height} = Dimensions.get('window');

原因就是React Native现在包含Dimensions了。

[makao007]

图片轮播那里，横屏时，图片那一行右边空着，如何解决呢？

[vczero]

（1）可以监听横屏，这个可以使用native api封装下。 （2）native上加一句代码禁止横屏：
//禁止横屏

• (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window{ return UIInterfaceOrientationMaskPortrait; }

[leecade]

抱歉老师, 新版本修复了, RN 更新频繁, 没有及时跟进.

[WestBrookGriffin]

在安卓中使用swiper的时候，第一页可以显示，但是准备轮播第二页的时候，会出现错误。 undefined is not a function(this.refs.scrollView.scrollTo(y, x)), swiper中的index.js中的第318行