1.移动SchoolAge位置

2.修改SchoolAge的页面UI
3.SchoolAge跳转MainPage并且传参
4.MainPage接收参数切换请求数据(若无传参默认学前 index=0)

pages/SchoolAge.js

@@ -0,0 +1,104 @@
+/**
+ * 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.toNextPage('MainPage', { index: 0 });
+	}
+
+	primary() {
+		this.toNextPage('MainPage', { index: 1 });
+	}
+
+	middle() {
+		this.toNextPage('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'
+	}
+});

pages/components/SchoolAge.js

@@ -1,148 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, { Component } from "react";
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-  Image,
-  TouchableOpacity,
-  ImageBackground,
-  Button,
-  DeviceEventEmitter
-} from "react-native";
-import AndroidUtil from "../../util/AndroidUtil";
-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%"
-        }}
-      >
-        <Text style={styles.title_text}>请选择孩子所在的学龄段</Text>
-        <View
-          style={{
-            flex: 1,
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "stretch"
-          }}
-        >
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "row"
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <TouchableOpacity
-              activeOpacity={1}
-              style={{
-                flex: 3,
-                width: 300,
-                height: 150
-              }}
-              onPress={() => this.toNextPage("MainActivity")}
-            >
-              <Image
-                source={{
-                  uri:
-                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556275628062&di=ee191e8dccb7132ad39f2f11b0fb1161&imgtype=0&src=http%3A%2F%2Fc61.cnki.net%2FCJFD%2Fbig%2FXQYJ%2FXQYJ199609.jpg"
-                }}
-                style={{
-                  width: 300,
-                  height: 150,
-                  borderRadius: 50
-                }}
-              />
-            </TouchableOpacity>
-            <View style={{ flex: 1 }} />
-          </View>
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "row"
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <TouchableOpacity
-              activeOpacity={1}
-              style={{
-                flex: 3,
-                width: 300,
-                height: 150
-              }}
-              onPress={() => this.toNextPage("MainPage")}
-            >
-              <Image
-                source={{
-                  uri:
-                    "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=532481250,2026274152&fm=15&gp=0.jpg"
-                }}
-                style={{
-                  flex: 3,
-                  width: 300,
-                  height: 150,
-                  borderRadius: 50
-                }}
-              />
-            </TouchableOpacity>
-            <View style={{ flex: 1 }} />
-          </View>
-          <View
-            style={{
-              flex: 1,
-
-              flexDirection: "row"
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Image
-              source={{
-                uri:
-                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-              }}
-              style={{
-                flex: 3,
-                width: 300,
-                height: 150,
-                borderRadius: 50
-              }}
-            />
-            <View style={{ flex: 1 }} />
-          </View>
-        </View>
-      </ImageBackground>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  title_text: {
-    justifyContent: "center",
-    alignItems: "center",
-    color: "red",
-    fontSize: 30,
-    textAlign: "center",
-    marginTop: 30,
-    marginBottom: 50
-  }
-});