diff --git a/AppIntro.js b/AppIntro.js
index 52b42d9..6aedb24 100644
--- a/AppIntro.js
+++ b/AppIntro.js
@@ -1,5 +1,7 @@
import assign from 'assign-deep';
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import LinearGradient from 'react-native-linear-gradient'
+import PropTypes from 'prop-types';
import {
StatusBar,
StyleSheet,
@@ -41,10 +43,18 @@ const defaulStyles = {
backgroundColor: '#9DD6EB',
padding: 15,
},
+ noBgSlide: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#9DD6EB',
+ padding: 15,
+ },
title: {
color: '#fff',
fontSize: 30,
paddingBottom: 20,
+ paddingTop: 10,
},
description: {
color: '#fff',
@@ -80,16 +90,16 @@ const defaulStyles = {
backgroundColor: 'transparent',
},
dotContainer: {
- flex: 0.6,
+ flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
btnContainer: {
- flex: 0.2,
+ flex: 1,
justifyContent: 'center',
alignItems: 'center',
- height: 50,
+ height: 50
},
nextButtonText: {
fontSize: 25,
@@ -118,23 +128,10 @@ export default class AppIntro extends Component {
};
}
- onNextBtnClick = (context) => {
- if (context.state.isScrolling || context.state.total < 2) return;
- const state = context.state;
- const diff = (context.props.loop ? 1 : 0) + 1 + context.state.index;
- let x = 0;
- if (state.dir === 'x') x = diff * state.width;
- if (Platform.OS === 'ios') {
- context.refs.scrollView.scrollTo({ y: 0, x });
- } else {
- context.refs.scrollView.setPage(diff);
- context.onScrollEnd({
- nativeEvent: {
- position: diff,
- },
- });
- }
- this.props.onNextBtnClick(context.state.index);
+ onNextBtnClick = (swiper) => {
+ // scrollTo really means scroll forward some offset
+ swiper.scrollTo(1);
+ this.props.onNextBtnClick(swiper.state.index);
}
setDoneBtnOpacity = (value) => {
@@ -157,7 +154,7 @@ export default class AppIntro extends Component {
{ toValue: value },
).start();
}
- getTransform = (index, offset, level) => {
+ getTransform = (index, offset, level=0) => {
const isFirstPage = index === 0;
const statRange = isFirstPage ? 0 : windowsWidth * (index - 1);
const endRange = isFirstPage ? windowsWidth : windowsWidth * index;
@@ -186,10 +183,10 @@ export default class AppIntro extends Component {
};
}
- renderPagination = (index, total, context) => {
+ renderPagination = (index, total, swiper) => {
let isDoneBtnShow;
let isSkipBtnShow;
- if (index === total - 1) {
+ if (index >= total - 1) {
this.setDoneBtnOpacity(1);
this.setSkipBtnOpacity(0);
this.setNextOpacity(0);
@@ -221,7 +218,7 @@ export default class AppIntro extends Component {
{...this.state}
isDoneBtnShow={isDoneBtnShow}
styles={this.styles}
- onNextBtnClick={this.onNextBtnClick.bind(this, context)}
+ onNextBtnClick={this.onNextBtnClick.bind(this, swiper)}
onDoneBtnClick={this.props.onDoneBtnClick} /> :
}
@@ -242,7 +239,27 @@ export default class AppIntro extends Component {
const AnimatedStyle2 = this.getTransform(index, 0, level);
const AnimatedStyle3 = this.getTransform(index, 15, level);
const imgSource = (typeof img === 'string') ? {uri: img} : img;
- const pageView = (
+ let colors = backgroundColor.split(',')
+ let pageView
+ if (colors.length > 1) {
+ pageView = (
+
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+ )
+ }
+ else
+ pageView = (
@@ -256,7 +273,7 @@ export default class AppIntro extends Component {
- );
+ )
return pageView;
}
@@ -309,9 +326,7 @@ export default class AppIntro extends Component {
if (pageArray.length > 0) {
pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page));
} else {
- if (Platform.OS === 'ios') {
- pages = childrens.map((children, i) => this.renderChild(children, i, i));
- } else {
+ if (Platform.OS === 'android') {
androidPages = childrens.map((children, i) => {
const { transform } = this.getTransform(i, -windowsWidth / 3 * 2, 1);
pages.push();
@@ -329,6 +344,8 @@ export default class AppIntro extends Component {
);
});
+ } else {
+ pages = childrens.map((children, i) => this.renderChild(children, i, i));
}
}
diff --git a/components/DoneButton.ios.js b/components/DoneButton.ios.js
index a6d2c9e..879ba3d 100644
--- a/components/DoneButton.ios.js
+++ b/components/DoneButton.ios.js
@@ -26,7 +26,7 @@ export const DoneButton = ({
>
{doneBtnLabel}
@@ -36,7 +36,7 @@ export const DoneButton = ({
- {nextBtnLabel}
+ {isDoneBtnShow ? doneBtnLabel : nextBtnLabel}
@@ -45,4 +45,3 @@ export const DoneButton = ({
}
export default DoneButton
-
\ No newline at end of file
diff --git a/components/DoneButton.web.js b/components/DoneButton.web.js
new file mode 100644
index 0000000..96c7351
--- /dev/null
+++ b/components/DoneButton.web.js
@@ -0,0 +1,2 @@
+import DoneButton from './DoneButton.ios'
+export default DoneButton
diff --git a/components/SkipButton.web.js b/components/SkipButton.web.js
new file mode 100644
index 0000000..ff5ecd4
--- /dev/null
+++ b/components/SkipButton.web.js
@@ -0,0 +1,2 @@
+import SkipButton from './SkipButton.ios'
+export default SkipButton
diff --git a/package.json b/package.json
index ed3fbd5..da69f70 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,11 @@
"homepage": "https://github.com/fuyaode/react-native-app-intro#readme",
"dependencies": {
"assign-deep": "^0.4.5",
- "react-native-swiper": "git+https://github.com/FuYaoDe/react-native-swiper.git"
+ "prop-types": "^15.5",
+ "react-native-swiper": "github:tradle/react-native-swiper#dev",
+ "react-native-web-linear-gradient": "^1.1.2"
+ },
+ "browser": {
+ "react-native-linear-gradient": "./web/shims/LinearGradient"
}
}
diff --git a/web/shims/LinearGradient.js b/web/shims/LinearGradient.js
new file mode 100644
index 0000000..272d3be
--- /dev/null
+++ b/web/shims/LinearGradient.js
@@ -0,0 +1,2 @@
+import LinearGradient from 'react-native-web-linear-gradient'
+export default LinearGradient
\ No newline at end of file