efunbox-mobile-8/pages/components/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,
  ImageBackground,
  Button,
  DeviceEventEmitter
} from "react-native";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

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
  }
});