efunbox-mobile-8/pages/SchoolAge.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	StatusBar,
	ImageBackground,
	Button,
	DeviceEventEmitter
} from 'react-native';
import BasePage from './BasePage';

type Props = {};
export default class SchoolAge extends BasePage {
	render() {
		return (
			<ImageBackground
				// source={{
				// 	uri:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg'
				// }}
				style={{
					flex: 1,
					width: '100%',
					height: '100%',
					backgroundColor: 'white'
				}}
			>
				<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'dark-content'} />
				<View style={{ flex: 0.5 }} />
				<Text style={styles.title_text}>请选择孩子所在的学龄段</Text>
				<View style={{ flex: 0.1 }} />
				<View
					style={{
						flex: 5,
						flexDirection: 'column',
						justifyContent: 'center',
						alignItems: 'center'
					}}
				>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.pres.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/preschool.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.primary.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/primary.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.middle.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/middle.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
				</View>
			</ImageBackground>
		);
	}

	pres() {
		this.clearPageToNext('MainPage', { index: 0 });
	}

	primary() {
		this.clearPageToNext('MainPage', { index: 1 });
	}

	middle() {
		this.clearPageToNext('MainPage', { index: 2 });
	}
}

const styles = StyleSheet.create({
	title_text: {
		justifyContent: 'center',
		alignItems: 'center',
		color: 'black',
		fontSize: 20,
		fontWeight: '300',
		textAlign: 'center'
	},
	view_flex: { flex: 0.1 },
	touchable_item: {
		flex: 1,
		width: '90%',
		justifyContent: 'center',
		alignItems: 'center'
	},
	image_item: {
		width: '100%',
		height: '95%',
		resizeMode: 'contain'
	}
});