1、引導(dǎo)頁(yè)是用來(lái)介紹一款應(yīng)用的一些特色功能，以及一些重大更新，在Android中一般使用ViewPager來(lái)實(shí)現(xiàn)绣否，iOS中可以通過(guò)ScrollView來(lái)實(shí)現(xiàn)，下面總結(jié)下RN中的實(shí)現(xiàn)方法挡毅。
2蒜撮、上一篇說(shuō)到啟動(dòng)頁(yè)，里面有一段代碼：

if (isFirst !== "1") {
                    storage.save({
                        key: 'user',
                        rawData: {
                            isFirst: "1",
                        },
                        // 設(shè)為null,則不過(guò)期,這里會(huì)覆蓋初始化的時(shí)效
                        expires: null
                    });
                    this.props.nav.resetTo({
                        component: GuideComponent,
                    });
                } else {
                    this.props.nav.resetTo({
                        component: Main,
                    });
                }

這里的GuideComponent就是一個(gè)引導(dǎo)頁(yè)的組件跪呈。
3段磨、這里我使用的是github上的開源庫(kù)來(lái)實(shí)現(xiàn)，github地址是：
React-Native-ViewPager耗绿，具體用法可以看它的demo
4苹支、下面看代碼：

import React, {Component} from "react";
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';
import IndicatorViewPager from "../viewpager1/IndicatorViewPager";
import PagerDotIndicator from "../viewpager1/indicator/PagerDotIndicator";
import Main from "./Main";

export default class GuideComponent extends Component {
    _renderIndicator() {
        return (
            <PagerDotIndicator
                pageCount={4}
                style={{bottom: 10}}
                dotStyle={{backgroundColor: '#ffffff'}}
                selectedDotStyle={{backgroundColor: 'red'}}
            />
        )
    }

    render() {
        return (
            <IndicatorViewPager
                style={{width: '100%', height: '100%'}}
                indicator={this._renderIndicator()}
                horizontalScroll={true}
                onPageSelected={(p) => console.log(p)}
            >
                <View>
                    <Image style={{
                        width: '100%', height: '100%', resizeMode: Image.resizeMode.stretch
                    }}
                           source={require('../images/guide_1.png')}>
                    </Image>
                </View>
                <View>
                    <Image style={{width: '100%', height: '100%', resizeMode: Image.resizeMode.stretch}}
                           source={require('../images/guide_2.png')}/>
                </View>
                <View>
                    <Image style={{width: '100%', height: '100%', resizeMode: Image.resizeMode.stretch}}
                           source={require('../images/guide_3.png')}/>
                </View>
                <View>
                    <Image style={{
                        width: '100%', height: '100%',
                        resizeMode: Image.resizeMode.stretch,
                        justifyContent: 'flex-end',
                        alignItems: 'center',
                    }}
                           source={require('../images/guide_4.png')}>
                        <TouchableOpacity
                            style={styles.btn}
                            onPress={() => {
                                this.props.nav.resetTo({
                                    component: Main,
                                });
                            }}
                        >
                            <Text style={styles.btnText}>立即體驗(yàn)</Text>
                        </TouchableOpacity>
                    </Image>
                </View>
            </IndicatorViewPager>
        )
    }
}
const styles = StyleSheet.create({
    btn: {
        width: 150,
        height: 40,
        backgroundColor: '#1296db',
        borderRadius: 8,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 50

    },
    btnText: {
        fontSize: 18,
        color: '#fff'
    },
});

AppRegistry.registerComponent("Guide", () => GuideComponent);

這些代碼應(yīng)該都很好理解，我這里是有把這個(gè)viewpager庫(kù)單獨(dú)提取出來(lái)放到項(xiàng)目中误阻，沒(méi)有通過(guò)yarn add來(lái)添加债蜜，因?yàn)槲液竺嬉恍┕δ苄枰薷牡竭@個(gè)庫(kù)里面的源碼。