A4B0671F-799C-43C8-AF87-15AB69038A12.png
最近工作忙，搞得RN學(xué)學(xué)停停的紊选，今天回來看了下別人開源的應(yīng)用啼止，看得一臉懵逼的，好吧兵罢，還是從最簡單的入手献烦。
這里通過ScrollView來實現(xiàn)一個引導(dǎo)頁面的功能，init工程這些就不說了卖词，直接看rn官網(wǎng)就可以了巩那，首先為了方便獲取屏幕的大小，我們來實現(xiàn)一個公共的類：
import React from 'react';
import Dimensions from 'Dimensions';
const Util = {
size: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
};
export default Util;
然后我們再創(chuàng)建一個引導(dǎo)頁面 guideView.js，目錄如下：
6CD645BB-FD8A-4BD4-B815-0A2E42F08B68.png
guide目錄下存入資源文件即横，view目錄下存放頁面文件噪生。
guideView 內(nèi)容：
'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的內(nèi)容的寬度應(yīng)該對應(yīng)你引導(dǎo)頁面的寬度，比如這里有三張圖东囚，那應(yīng)該就是屏幕寬度的三倍跺嗽。
bounces 屬性指的是第一張或最后一張是否有彈簧效果。
pagingEnabled 就是分頁效果了页藻。
最后在index.ios.js里面調(diào)用：
'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的同學(xué)們桨嫁，千萬不想相信 react native 中文網(wǎng)推薦的風(fēng)耀的視頻，買了vip入去惕橙，發(fā)現(xiàn)視頻不更新瞧甩，先不說視頻質(zhì)量怎么樣钉跷，感覺照搬某課網(wǎng)的弥鹦，這都可以忍，但天天推廣點公益爷辙，也敢叫公益的公益彬坏。被騙得不要不要。
