react-native 引导页怎么触发一次

这里通过滚动型来实现一个引导页面的功能时，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，

引导目录下存入资源文件，查看目录下存放页面文件。

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 (
contentContainerStyle={styles.contentContainer}
bounces={false}
pagingEnabled={true}
horizontal={true}>




);
}
};

var styles = StyleSheet.create({
contentContainer: {
width: Util.size.width*3,
height: Util.size.height,
},
backgroundImage: {
width: Util.size.width,
height: Util.size.height,
},
});

这里需要注意下的就是内容查看的内容的宽度应该对应你引导页面的宽度，比如这里有三张图，那应该就是屏幕宽度的三倍。

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 (

);
}
}

AppRegistry.registerComponent('GuideView', () => GuideView);