A4B0671F-799C-43C8-AF87-15AB69038A12.png
最近工作忙，搞得RN学学停停的，今天回来看了下别人开源的应用，看得一脸懵逼的，好吧，还是从最简单的入手。
这里通过ScrollView来实现一个引导页面的功能，init工程这些就不说了，直接看rn官网就可以了，首先为了方便获取屏幕的大小，我们来实现一个公共的类：
import React from 'react';
import Dimensions from 'Dimensions';
const Util = {
size: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
};
export default Util;
然后我们再创建一个引导页面 guideView.js，目录如下：
6CD645BB-FD8A-4BD4-B815-0A2E42F08B68.png
guide目录下存入资源文件，view目录下存放页面文件。
guideView 内容：
'use strict';
import React, {Component} from 'react';
import {
Image,
ScrollView,
StyleSheet,
Text,
} from 'react-native';
let image1 = require('../guide/guide_1.png');
let image2 = require('../guide/guide_2.png');
let image3 = require('../guide/guide_3.png');
import Util from './utils';
export default class extends Component {
constructor() {
super();
};
render() {
return (
<ScrollView
contentContainerStyle={styles.contentContainer}
bounces={false}
pagingEnabled={true}
horizontal={true}>
<Image source={image1} style={styles.backgroundImage} />
<Image source={image2} style={styles.backgroundImage} />
<Image source={image3} style={styles.backgroundImage} />
</ScrollView>
);
}
};
var styles = StyleSheet.create({
contentContainer: {
width: Util.size.width*3,
height: Util.size.height,
},
backgroundImage: {
width: Util.size.width,
height: Util.size.height,
},
});
这里需要注意下的就是contentView的内容的宽度应该对应你引导页面的宽度，比如这里有三张图，那应该就是屏幕宽度的三倍。
bounces 属性指的是第一张或最后一张是否有弹簧效果。
pagingEnabled 就是分页效果了。
最后在index.ios.js里面调用：
'use strict';
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import Guide from './view/guideView';
export default class GuideView extends Component {
render() {
return (
<Guide />
);
}
}
AppRegistry.registerComponent('GuideView', () => GuideView);
最终效果：
123.gif
新手入门RN的同学们，千万不想相信 react native 中文网推荐的风耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广点公益，也敢叫公益的公益。被骗得不要不要。
