视觉差效果欢迎页 – react-native-app-intro

[weixin_38050362]

react-native-app-intro react-native-app-intro是一个react native组件，实现了一个视觉差效果欢迎页，基于react-native-swiper，类似与谷歌应用程序比如Sheet，Drive，Docs等。 支持iOS、Android 安装 基础使用 你可以使用pageArray快速生成具有视差效果的app介绍。随着基础的使用方法，Android状态栏将会更新为匹配相关的背景颜色。 import React, { Component } from 'react'; import { AppRegistry, Alert } from 'react-native'; import AppIntro from 'react-native-app-intro'; class Example extends Component { onSkipBtnHandle = (index) => { Alert.alert('Skip'); console.log(index); } doneBtnHandle = () => { Alert.alert('Done'); } nextBtnHandle = (index) => { Alert.alert('Next'); console.log(index); } onSlideChangeHandle = (index, total) => { console.log(index, total); } render() { const pageArray = [{ title: 'Page 1', description: 'Description 1', img: 'https://goo.gl/Bnc3XP', imgStyle: { height: 80 * 2.5, width: 109 * 2.5, }, backgroundColor: '#fa931d', fontColor: '#fff', level: 10, }, { title: 'Page 2', description: 'Description 2', img: require('../assets/some_image.png'), imgStyle: { height: 93 * 2.5, width: 103 * 2.5, }, backgroundColor: '#a4b602', fontColor: '#fff', level: 10, }]; return ( <AppIntro onNextBtnClick={this.nextBtnHandle} onDoneBtnClick={this.doneBtnHandle} onSkipBtnClick={this.onSkipBtnHandle} onSlideChange={this.onSlideChangeHandle} pageArray={pageArray} /> ); } } AppRegistry.registerComponent('Example', () => Example);