React Native学习之引导页(五)

1、引导页是用来介绍一款应用的一些特色功能，以及一些重大更新，在Android中一般使用ViewPager来实现，iOS中可以通过ScrollView来实现，下面总结下RN中的实现方法。
2、上一篇说到启动页，里面有一段代码：

if (isFirst !== "1") {
                    storage.save({
                        key: 'user',
                        rawData: {
                            isFirst: "1",
                        },
                        // 设为null,则不过期,这里会覆盖初始化的时效
                        expires: null
                    });
                    this.props.nav.resetTo({
                        component: GuideComponent,
                    });
                } else {
                    this.props.nav.resetTo({
                        component: Main,
                    });
                }

这里的GuideComponent就是一个引导页的组件。
3、这里我使用的是github上的开源库来实现，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);

这些代码应该都很好理解，我这里是有把这个viewpager库单独提取出来放到项目中，没有通过yarn add来添加，因为我后面一些功能需要修改到这个库里面的源码。