231 lines
5.2 KiB
JavaScript
231 lines
5.2 KiB
JavaScript
|
import React, { Component } from "react";
|
||
|
import {
|
||
|
Platform,
|
||
|
StyleSheet,
|
||
|
Text,
|
||
|
View,
|
||
|
Alert,
|
||
|
SafeAreaView,
|
||
|
Image
|
||
|
} from "react-native";
|
||
|
import { observable } from "mobx";
|
||
|
import { observer, inject } from "mobx-react/native";
|
||
|
import ScrollableTabView from "react-native-scrollable-tab-view";
|
||
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||
|
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
||
|
// function
|
||
|
import { width, height } from "../../config/screen";
|
||
|
import theme from "../../config/colors";
|
||
|
import { Fonts } from "../../config/fonts";
|
||
|
import Size from "../../config/size";
|
||
|
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||
|
import language from "../../config/language";
|
||
|
const asyncStorageHelper = new AsyncStorageHelper();
|
||
|
import Swiper from "react-native-swiper";
|
||
|
var size = new Size();
|
||
|
@inject(["menuStore"], ["userStore"])
|
||
|
@observer
|
||
|
export default class Tutorial extends Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.store = this.props.userStore;
|
||
|
this.menuStore = this.props.menuStore;
|
||
|
}
|
||
|
componentWillMount() {
|
||
|
const { navigation } = this.props;
|
||
|
this.data = navigation.getParam("data", {});
|
||
|
console.log(this.data);
|
||
|
}
|
||
|
|
||
|
init() {
|
||
|
console.log(this.store.logined);
|
||
|
if (!this.store.logined) {
|
||
|
// this.props.navigation.navigate("Login");
|
||
|
} else {
|
||
|
}
|
||
|
}
|
||
|
|
||
|
navigatieAction(page, Param) {
|
||
|
this.props.navigation.navigate(page, Param);
|
||
|
}
|
||
|
|
||
|
closeButton() {
|
||
|
return (
|
||
|
<Icon
|
||
|
name="close-circle"
|
||
|
size={size.getSize(30)}
|
||
|
color={'white'}
|
||
|
style={{ position: "absolute", top: 15,left:10 }}
|
||
|
onPress={() => this.finish()}
|
||
|
/>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
swiper(){
|
||
|
if(this.store.languageSelection === 'english'){
|
||
|
return(
|
||
|
<Swiper
|
||
|
style={styles.wrapper}
|
||
|
activeDot={
|
||
|
<View
|
||
|
style={{
|
||
|
backgroundColor: "white",
|
||
|
width: 8,
|
||
|
height: 8,
|
||
|
borderRadius: 4,
|
||
|
marginLeft: 3,
|
||
|
marginRight: 3,
|
||
|
marginTop: 3,
|
||
|
marginBottom: 3
|
||
|
}}
|
||
|
/>
|
||
|
}
|
||
|
>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_en1.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_en2.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_en3.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_en4.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
</Swiper>
|
||
|
)
|
||
|
}else{
|
||
|
return(
|
||
|
<Swiper
|
||
|
style={styles.wrapper}
|
||
|
activeDot={
|
||
|
<View
|
||
|
style={{
|
||
|
backgroundColor: "white",
|
||
|
width: 8,
|
||
|
height: 8,
|
||
|
borderRadius: 4,
|
||
|
marginLeft: 3,
|
||
|
marginRight: 3,
|
||
|
marginTop: 3,
|
||
|
marginBottom: 3
|
||
|
}}
|
||
|
/>
|
||
|
}
|
||
|
>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_ch1.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_ch2.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_ch3.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
<View style={styles.slide1}>
|
||
|
<Image
|
||
|
source={require("../../images/apppreview_ch4.jpg")}
|
||
|
style={styles.image}
|
||
|
/>
|
||
|
{this.closeButton()}
|
||
|
</View>
|
||
|
</Swiper>
|
||
|
)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
finish() {
|
||
|
const { navigation } = this.props;
|
||
|
var data = navigation.getParam("data", {});
|
||
|
if (data == "store") {
|
||
|
this.navigatieAction("LocationRequest");
|
||
|
} else {
|
||
|
this.props.navigation.goBack();
|
||
|
}
|
||
|
}
|
||
|
render() {
|
||
|
return (
|
||
|
<SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
|
||
|
<View style={styles.container}>
|
||
|
|
||
|
{this.swiper()}
|
||
|
</View>
|
||
|
</SafeAreaView>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
height: height,
|
||
|
width: width
|
||
|
},
|
||
|
image: {
|
||
|
width: width,
|
||
|
height: height
|
||
|
},
|
||
|
welcome: {
|
||
|
fontSize: 20,
|
||
|
textAlign: "center",
|
||
|
margin: 10
|
||
|
},
|
||
|
instructions: {
|
||
|
textAlign: "center",
|
||
|
color: "#333333",
|
||
|
marginBottom: 5
|
||
|
},
|
||
|
slide1: {
|
||
|
flex: 1,
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center",
|
||
|
backgroundColor: theme.mainColor
|
||
|
},
|
||
|
slide2: {
|
||
|
flex: 1,
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center",
|
||
|
backgroundColor: "#97CAE5"
|
||
|
},
|
||
|
slide3: {
|
||
|
flex: 1,
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center",
|
||
|
backgroundColor: "#92BBD9"
|
||
|
},
|
||
|
text: {
|
||
|
color: "#fff",
|
||
|
fontSize: 30,
|
||
|
fontWeight: "bold"
|
||
|
}
|
||
|
});
|