注册页及组建，框架继续封装

js/component/MyButton.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+import PropTypes from 'prop-types'
+export default class MyButton extends Component {
+    static defaultProps = {
+        bgColor: '#000',
+        fColor: '#fff'
+    };
+    static propTypes = {
+        //按钮宽度
+        width: PropTypes.string.isRequired,
+        //按钮高度
+        height: PropTypes.string.isRequired,
+        //按钮的圆度
+        borderRadius: PropTypes.string.isRequired,
+        //文本的样式
+        style: PropTypes.object,
+        //背景颜色
+        bgColor: PropTypes.string,
+        //字体颜色
+        fColor: PropTypes.string,
+        //文本
+        text: PropTypes.string.isRequired,
+        //按钮事件
+        onPress: PropTypes.func.isRequired,
+        //用于给残障人士显示的文本
+        accessibilityLabel: PropTypes.string
+    }
+    render() {
+        let { style, bgColor, fColor, text, accessibilityLabel, width, height, borderRadius, shadowBgc } = this.props
+        return (
+            <TouchableOpacity onPress={this.props.onPress}>
+                <View style={{
+                    width: width,
+                    height: height,
+                    backgroundColor: bgColor,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    shadowRadius: 5,
+                    shadowOpacity: 0.3,
+                    shadowOffset: { width: -2, height: 2 },
+                    shadowColor: shadowBgc,
+                    borderRadius: borderRadius
+                }}>
+                    <Text style={{
+                        fontWeight: 'bold',
+                        color: fColor,
+                        ...style
+                    }}
+                        accessibilityLabel={accessibilityLabel}
+                    >{text}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+}

js/navigator/AppNavigators.js

@@ -1,9 +1,16 @@
 import {createAppContainer,createSwitchNavigator} from "react-navigation"
 import {createStackNavigator} from "react-navigation-stack"
 import WelcomePage from"../page/WelcomePage"
+import LoginPage from"../page/LoginPage"
 import HomePage from "../page/HomePage"
 
 const InitNavigator = createStackNavigator({
+    LoginPage:{
+        screen:LoginPage,
+        navigationOptions:{
+            header:null
+        }
+    },
     WelcomePage:{
         screen:WelcomePage,
         navigationOptions:{
@@ -21,7 +28,7 @@ const MainNavigator = createStackNavigator({
 })
 export default createAppContainer(createSwitchNavigator({
     Init:InitNavigator,
-    Main:MainNavigator
+    // Main:MainNavigator
 },{
     navigationOptions:{
         header:null

js/page/LoginPage.js

@@ -0,0 +1,140 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, TextInput, Button } from "react-native"
+import NavigationUtil from "../navigator/NavigationUtil"
+import EvilIcons from "react-native-vector-icons/EvilIcons"
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
+import MyButtom from '../component/MyButton'
+
+export default class Loginpage extends Component {
+	componentDidMount() {
+		this.timer = setTimeout(() => {
+			// NavigationUtil.resetToHomePage(this.props)
+		}, 5000)
+	}
+	componentWillMount() {
+		this.timer && clearTimeout(this.timer)
+	}
+	render() {
+		return (
+			<View style={styles.container}>
+				<Text style={styles.loginTitle}>账号密码登录</Text>
+				<View style={styles.inputArea}>
+					<View style={styles.inputPhone}>
+						<View style={styles.inputLeft}>
+							<Text style={styles.inputLeftText}>+86</Text>
+						</View>
+						<View style={styles.inputRight}>
+							<TextInput
+								placeholder="请输入手机号"
+								placeholderTextColor={{ color: "#999999" }}
+								style={styles.TextInput}
+							/>
+						</View>
+					</View>
+					<View style={styles.inputPass}>
+						<View style={styles.inputLeft}>
+							<EvilIcons
+								name={"unlock"}
+								size={38}
+								style={{ color: "#333333" }}
+							/>
+						</View>
+						<View>
+							<TextInput
+								placeholder="请输入密码"
+								placeholderTextColor={{ color: "#999999" }}
+								style={styles.TextInput}
+							/>
+						</View>
+					</View>
+
+				</View>
+				<View style={styles.forgetPassArea}>
+					<Text>手机号注册登录</Text>
+					<Text>忘记密码</Text>
+				</View>
+				<View style={styles.loginBtnArea}>
+					<MyButtom
+						text={'登录'}
+						width={unitWidth * 502}
+						height={unitHeight * 84}
+						borderRadius={unitHeight * 84}
+						bgColor="#FA788A"
+						shadowBgc="rgba(250,120,138,1)"
+						style={{ fontSize: unitWidth * 32 }}
+					/>
+				</View>
+			</View>
+		)
+	}
+}
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		paddingTop: getStatusBarHeight() + unitWidth * 138,
+		paddingLeft: unitWidth * 60,
+		paddingRight: unitWidth * 60,
+	},
+	loginTitle: {
+		fontSize: unitWidth * 38,
+		fontWeight: "bold",
+		color: "rgba(250,120,138,1)",
+		marginBottom: unitWidth * 70
+	},
+	inputArea: {
+		width: unitWidth * 628,
+		height: unitHeight * 236,
+		justifyContent: "space-between"
+	},
+	inputPhone: {
+		width: "100%",
+		height: unitHeight * 98,
+		borderRadius: unitWidth * 98,
+		borderWidth: unitWidth * 1,
+		borderColor: "#ccc",
+		flexDirection: "row"
+	},
+	inputLeft: {
+		marginTop: unitHeight * 9,
+		width: unitWidth * 147,
+		height: unitHeight * 80,
+		borderRightWidth: unitWidth * 1,
+		borderRightColor: "#ccc",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	inputRight: {
+		width: unitWidth * 480,
+		height: "100%",
+	},
+	TextInput: {
+		width: "100%",
+		height: "100%",
+		paddingLeft: unitWidth * 26,
+		fontSize: unitWidth * 28
+	},
+	inputPass: {
+		width: "100%",
+		height: unitHeight * 98,
+		borderRadius: unitWidth * 98,
+		borderWidth: unitWidth * 1,
+		borderColor: "#ccc",
+		flexDirection: "row"
+	},
+	forgetPassArea: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		width: "100%",
+		fontSize: unitWidth * 28,
+		color: "#333333",
+		marginTop: unitHeight * 28
+	},
+	loginBtnArea: {
+		width:"100%",
+		marginTop:unitHeight * 98,
+		height:unitHeight * 84,
+		justifyContent:'center',
+		alignItems:'center'
+	}
+
+})

js/page/WelcomePage.js

@@ -5,7 +5,7 @@ import NavigationUtil from "../navigator/NavigationUtil"
 export default class WelcomePage extends Component {
 	componentDidMount() {
 		this.timer = setTimeout(() => {
-			NavigationUtil.resetToHomePage(this.props)
+			// NavigationUtil.resetToHomePage(this.props)
 		}, 5000)
 	}
 	componentWillMount() {

js/utils/AdapterUtil.js

@@ -0,0 +1,45 @@
+"use strict"
+
+import {Dimensions, StatusBar, Platform, PixelRatio} from 'react-native'
+
+//UI设计图的宽度
+const designWidth = 750
+//UI设计图的高度
+const designHeight = 1334
+
+//手机屏幕的宽度
+export const width = Dimensions.get('window').width;
+//手机屏幕的高度
+export const height = Dimensions.get('window').height;
+//计算手机屏幕宽度对应设计图宽度的单位宽度
+export const unitWidth = width / designWidth
+//计算手机屏幕高度对应设计图高度的单位高度
+export const unitHeight = height / designHeight
+
+export const statusBarHeight = getStatusBarHeight();
+export const safeAreaViewHeight = isIphoneX() ? 34 : 0
+//标题栏的高度
+export const titleHeight = unitWidth * 100 + statusBarHeight;
+
+//字体缩放比例，一般情况下不用考虑。
+// 当应用中的字体需要根据手机设置中字体大小改变的话需要用到缩放比例
+export const fontscale = PixelRatio.getFontScale()
+
+/**
+ * 判断是否为iphoneX
+ * @returns {boolean}
+ */
+export function isIphoneX() {
+    const X_WIDTH = 375;
+    const X_HEIGHT = 812;
+    return Platform.OS == 'ios' && (height == X_HEIGHT && width == X_WIDTH)
+}
+
+//状态栏的高度
+export function getStatusBarHeight() {
+    if (Platform.OS == 'android') return StatusBar.currentHeight;
+    if (isIphoneX()) {
+        return 44
+    }
+    return 20
+}

yarn.lock

@@ -1291,6 +1291,11 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+app-root-path@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.2.1.tgz#d0df4a682ee408273583d43f6f79e9892624bc9a"
+  integrity sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -1694,6 +1699,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/capture-exit/download/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -2015,6 +2025,44 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
+css-to-react-native-transform@^1.8.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native-transform/-/css-to-react-native-transform-1.9.0.tgz#63369f479048ab7662f5320f8010840ad91344e7"
+  integrity sha512-darzotx5xx+Q0bzASkvNBasztLCssNerzf9jpMZx0H4CTY6J/y2Wh50ZtYAJ3FmESEux1bJcGa6T0zfISTuFqw==
+  dependencies:
+    css "^2.2.4"
+    css-mediaquery "^0.1.2"
+    css-to-react-native "^2.3.0"
+
+css-to-react-native@^2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
+  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^3.3.0"
+
+css@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.8"
   resolved "https://registry.npm.taobao.org/cssom/download/cssom-0.3.8.tgz?cache=0&sync_timestamp=1573719337707&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcssom%2Fdownload%2Fcssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
@@ -5037,6 +5085,11 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.npm.taobao.org/posix-character-classes/download/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5198,6 +5251,15 @@ react-native-safe-area-view@^0.14.6, react-native-safe-area-view@^0.14.8:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
+react-native-sass-transformer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-sass-transformer/-/react-native-sass-transformer-1.4.0.tgz#1b6a1ed6f2b6338ba42f2a46afd1f23f9ada3439"
+  integrity sha512-PlRiaJIcDzYpIVDH0OQuabkMGy/zp7N/A14rqhBrFqhADXC0xR2W53Cb7CicL9CsOL4y7Sh2dv4pgMvqgMdwqQ==
+  dependencies:
+    app-root-path "^2.1.0"
+    css-to-react-native-transform "^1.8.1"
+    semver "^5.6.0"
+
 react-native-screens@^2.0.0-beta.13:
   version "2.0.0-beta.13"
   resolved "https://registry.npm.taobao.org/react-native-screens/download/react-native-screens-2.0.0-beta.13.tgz#ada338c3b46d016b06d0416e59d4aa0b9b39c731"
@@ -5844,7 +5906,7 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.npm.taobao.org/source-map-resolve/download/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
   integrity sha1-GQhmvs51U+H48mei7oLGBrVQmho=