偶遇

js/component/MyButton.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 export default class MyButton extends Component {
     static defaultProps = {
         bgColor: '#000',
-        fColor: '#fff'
+        fColor: '#fff',
+        borderColor: null,
+        borderWidth:null
     };
     static propTypes = {
         //按钮宽度
@@ -27,7 +29,7 @@ export default class MyButton extends Component {
         accessibilityLabel: PropTypes.string
     }
     render() {
-        let { style, bgColor, fColor, text, accessibilityLabel, width, height, borderRadius, shadowBgc } = this.props
+        let { style, bgColor, fColor, text, accessibilityLabel, width, height, borderRadius, shadowBgc, borderColor, borderWidth } = this.props
         return (
             <TouchableOpacity onPress={this.props.onPress}>
                 <View style={{
@@ -40,7 +42,9 @@ export default class MyButton extends Component {
                     shadowOpacity: 0.3,
                     shadowOffset: { width: -2, height: 2 },
                     shadowColor: shadowBgc,
-                    borderRadius: borderRadius
+                    borderRadius: borderRadius,
+                    borderWidth: borderWidth,
+                    borderColor: borderColor
                 }}>
                     <Text style={{
                         fontWeight: 'bold',

js/navigator/AppNavigators.js

@@ -6,10 +6,17 @@ import register from "../page/register"
 import register1 from "../page/register1"
 import register2 from "../page/register2"
 import register3 from "../page/register3"
+import meet from "../page/meet"
 import forgetPassWord from "../page/forgetPassWord"
 import HomePage from "../page/HomePage"
 
 const InitNavigator = createStackNavigator({
+    meet:{
+        screen:meet,
+        navigationOptions:{
+            headerTitle:"偶遇"
+        }
+    },
     register3:{
         screen:register3,
         navigationOptions:{

js/page/meet.js

@@ -0,0 +1,211 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
+import MyButtom from '../component/MyButton'
+import { color } from "react-native-reanimated";
+
+export default class Loginpage extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.photoArea}>
+                    <View style={styles.photoRow}>
+                        <View style={styles.photoItem}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userPhone}
+                            />
+                            <View style={styles.userPhoneText}>
+                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                            </View>
+                        </View>
+                        <View style={styles.photoItem}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userPhone}
+                            />
+                            <View style={styles.userPhoneText}>
+                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.photoCenterRow}>
+                        <View style={styles.photoCenterCul}>
+                            <View style={styles.photoItem}>
+                                <Image
+                                    source={require("../../static/userPhone.png")}
+                                    style={styles.userPhone}
+                                />
+                                <View style={styles.userPhoneText}>
+                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                                </View>
+                            </View>
+                            <View style={styles.photoItem}>
+                                <Image
+                                    source={require("../../static/userPhone.png")}
+                                    style={styles.userPhone}
+                                />
+                                <View style={styles.userPhoneText}>
+                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View style={styles.photoCenter}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userCenterPhone}
+                            />
+                            <View style={styles.userCenterText}>
+                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                            </View>
+                        </View>
+                        <View style={styles.photoCenterCul}>
+                            <View style={styles.photoItem}>
+                                <Image
+                                    source={require("../../static/userPhone.png")}
+                                    style={styles.userPhone}
+                                />
+                                <View style={styles.userPhoneText}>
+                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                                </View>
+                            </View>
+
+                            <View style={styles.photoItem}>
+                                <Image
+                                    source={require("../../static/userPhone.png")}
+                                    style={styles.userPhone}
+                                />
+                                <View style={styles.userPhoneText}>
+                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.photoRow}>
+                        <View style={styles.photoItem}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userPhone}
+                            />
+                            <View style={styles.userPhoneText}>
+                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                            </View>
+                        </View>
+                        <View style={styles.photoItem}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userPhone}
+                            />
+                            <View style={styles.userPhoneText}>
+                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View style={styles.bottomBtn}>
+                    <MyButtom
+                        text={"换一批"}
+                        width={unitWidth * 270}
+                        height={unitHeight * 74}
+                        borderRadius={unitHeight * 74}
+                        bgColor="#FA788A"
+                        shadowBgc="rgba(250,120,138,1)"
+                        style={{ fontSize: unitWidth * 28 }}
+                    />
+                    <MyButtom
+                        text={"换题目"}
+                        width={unitWidth * 270}
+                        height={unitHeight * 74}
+                        borderRadius={unitHeight * 74}
+                        bgColor="#fff"
+                        shadowBgc="#fff"
+                        borderColor="#FA788A"
+                        borderWidth={1}
+                        style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
+                    />
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingTop: getStatusBarHeight() + unitHeight * 38,
+        alignItems: "center"
+    },
+    photoArea: {
+        height: unitHeight * 714,
+        width: "100%"
+    },
+    photoRow: {
+        width: "100%",
+        height: unitHeight * 133,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingLeft: unitWidth * 206,
+        paddingRight: unitWidth * 206
+    },
+    photoCenterRow: {
+        width: "100%",
+        height: unitHeight * 340,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingLeft: unitWidth * 55,
+        paddingRight: unitWidth * 55
+    },
+    photoCenterCul: {
+        width: unitWidth * 133,
+        height: "100%",
+        justifyContent: "space-between"
+    },
+    photoCenter: {
+        height: unitHeight * 187,
+        width: unitWidth * 167,
+        alignItems: "center"
+    },
+    userCenterPhone: {
+        height: unitWidth * 167,
+        width: unitWidth * 167,
+        borderRadius: unitHeight * 167,
+    },
+    userCenterText: {
+        width: unitWidth * 100,
+        height: unitHeight * 40,
+        backgroundColor: "#FA788A",
+        marginTop: unitHeight * -20,
+        borderRadius: unitHeight * 40,
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    photoItem: {
+        width: unitWidth * 133,
+        height: unitHeight * 151,
+        alignItems: "center"
+    },
+    userPhone: {
+        width: unitWidth * 133,
+        height: unitWidth * 133,
+        borderRadius: unitWidth * 133
+    },
+    userPhoneText: {
+        width: unitWidth * 90,
+        height: unitHeight * 36,
+        backgroundColor: "#FA788A",
+        borderRadius: unitHeight * 36,
+        marginTop: unitHeight * -18,
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    bottomBtn: {
+        width: "100%",
+        marginTop: unitHeight * 94,
+        height: unitHeight * 74,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingLeft: unitWidth * 65,
+        paddingRight: unitWidth * 65
+    }
+
+})

js/page/register3.js

@@ -1,7 +1,5 @@
 import React, { Component } from "react"
-import { StyleSheet, Text, View, TextInput, Image } from "react-native"
-import AntDesign from "react-native-vector-icons/AntDesign"
-import RNPickerSelect from 'react-native-picker-select';
+import { StyleSheet, Text, View, Image } from "react-native"
 import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
 import MyButtom from '../component/MyButton'
 
@@ -40,15 +38,15 @@ const styles = StyleSheet.create({
         paddingRight: unitWidth * 60,
         alignItems: "center"
     },
-    title:{
-        color:"#FA788A",
-        fontSize:unitWidth * 28,
+    title: {
+        color: "#FA788A",
+        fontSize: unitWidth * 28,
         marginTop: unitHeight * 50,
-        marginBottom:unitHeight * 30,
+        marginBottom: unitHeight * 30,
     },
-    subTitle:{
-        color:"#999999",
-        fontSize:unitWidth * 28
+    subTitle: {
+        color: "#999999",
+        fontSize: unitWidth * 28
     },
     bottomBtn: {
         width: "100%",