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

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 (

onNextBtnClick={this.nextBtnHandle}

onDoneBtnClick={this.doneBtnHandle}

onSkipBtnClick={this.onSkipBtnHandle}

onSlideChange={this.onSlideChangeHandle}

pageArray={pageArray}

/>

);

}

}

AppRegistry.registerComponent('Example', () => Example);