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

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

這里的GuideComponent就是一個引導(dǎo)頁的組件。
3、這里我使用的是github上的開源庫來實現(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}>立即體驗</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)該都很好理解，我這里是有把這個viewpager庫單獨提取出來放到項目中，沒有通過yarn add來添加，因為我后面一些功能需要修改到這個庫里面的源碼。