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 (
            
        )
    }

    render() {
        return (
             console.log(p)}
            >
                
                    
                    
                
                
                    
                
                
                    
                
                
                    
                         {
                                this.props.nav.resetTo({
                                    component: Main,
                                });
                            }}
                        >
                            立即体验
                        
                    
                
            
        )
    }
}
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来添加，因为我后面一些功能需要修改到这个库里面的源码。