update

contacts/App.js

@@ -1,74 +1,67 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
+import ContactsWrapper from 'react-native-contacts-wrapper';
 import {
-    AppRegistry,
     StyleSheet,
     Text,
     View,
-    Platform
+    TouchableOpacity
 } from 'react-native';
-import ContactPickerBridge from 'react-native-contacts-picker';
-import checkContactsPermission from './requestPermission';
-import kiperContacts from 'react-native-kiper-contacts';
 
-if(Platform.OS==='android'){
-    checkContactsPermission()
-}
+export default class App extends Component {
+
+    constructor(props) {
+        super(props);
+        this.onButtonPressed = this.onButtonPressed.bind(this);
+    }
 
+    onButtonPressed() {
+        ContactsWrapper.getContact()
+        .then((contact) => {
+            // Replace this code
+            console.log(contact);
+        })
+        .catch((error) => {
+            console.log("ERROR CODE: ", error.code);
+            console.log("ERROR MESSAGE: ", error.message);
+        });
+    }
 
-export default class ContactPicker extends Component {
     render() {
         return (
-            <View style={styles.container}>
-                <Text style={styles.welcome} onPress={this.openContactPicker}>打开通讯录选择器</Text>
-                <Text style={styles.welcome} onPress={this.getAllContact}>获取全部通讯录</Text>
-                <Text style={styles.welcome} onPress={this.checkContactPermissions}>是否有通讯录权限</Text>
+            <View style = {styles.container}>
+                <TouchableOpacity onPress = {this.onButtonPressed}>
+                    <View style = {styles.buttonWrapper}>
+                        <Text style = {styles.buttonText}>Open Contact</Text>
+                    </View>
+                </TouchableOpacity>
             </View>
+
         );
     }
-
-    openContactPicker = () => {
-        ContactPickerBridge.openContactPicker((result) => {
-            console.log('openContactPicker ---->', JSON.stringify(result));
-        });
-    };
-
-    getAllContact = () => {
-        ContactPickerBridge
-            .getAllContact((result) => {
-                console.log('getAllContact ---->', JSON.stringify(result));
-            });
-    };
-
-    checkContactPermissions = () => {
-        ContactPickerBridge
-            .checkContactPermissions((result) => {
-                console.log('getAllContact ---->', JSON.stringify(result));
-            });
-    };
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#F5FCFF',
-    },
-    welcome: {
-        fontSize: 20,
-        textAlign: 'center',
-        margin: 10,
-    },
-    instructions: {
-        textAlign: 'center',
-        color: '#333333',
-        marginBottom: 5,
-    },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#999999',
+  },
+  buttonWrapper: {
+      marginTop: 70,
+      marginLeft: 20,
+      marginRight:20,
+      flexDirection: 'column',
+      backgroundColor: '#00CCFF',
+      borderRadius: 4
+  },
+  buttonText: {
+      justifyContent: 'center',
+      alignSelf: 'center',
+      marginTop: 10,
+      marginBottom: 10,
+      marginHorizontal: 20,
+      elevation: 1,
+      color: '#FFFFFF'
+  }
 });

contacts/android/app/build.gradle

@@ -137,6 +137,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-contacts-wrapper')
     compile project(':react-native-kiper-contacts')
     compile project(':react-native-contacts-picker')
     compile fileTree(dir: "libs", include: ["*.jar"])

contacts/android/app/src/main/java/com/contacts/MainApplication.java

@@ -3,6 +3,7 @@ package com.contacts;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.lynxit.contactswrapper.ContactsWrapperPackage;
 import br.com.kiper.contact.KiperContactsPackage;
 import com.xb.contactpicker.ReactNativeContacts;
 import com.facebook.react.ReactNativeHost;
@@ -25,6 +26,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ContactsWrapperPackage(),
             new KiperContactsPackage(),
             new ReactNativeContacts()
       );

contacts/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'contacts'
+include ':react-native-contacts-wrapper'
+project(':react-native-contacts-wrapper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-contacts-wrapper/android/app')
 include ':react-native-kiper-contacts'
 project(':react-native-kiper-contacts').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kiper-contacts/android')
 include ':react-native-contacts-picker'

contacts/ios/contacts.xcodeproj/project.pbxproj

@@ -39,6 +39,7 @@
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
+		D65792E406FE40AC8E22A896 /* libRCTContactsWrapper.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1F39297D92A143DB977273E7 /* libRCTContactsWrapper.a */; };
 		FF731948864C429D9BDA9E58 /* libRNContactsPicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7A63E21AE147496B81425394 /* libRNContactsPicker.a */; };
 /* End PBXBuildFile section */
 
@@ -316,6 +317,13 @@
 			remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
 			remoteInfo = RCTBlob;
 		};
+		AE3B4CB42132986A006E0B16 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = B2E19C206E7F4D0098A1EF06 /* ContactsWrapper.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2B58405A1D10DE8700235F31;
+			remoteInfo = RCTContactsWrapper;
+		};
 		AEAADC272131731100FED8AE /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = E6C6DABAA5214E5E884348FC /* RNContactsPicker.xcodeproj */;
@@ -352,6 +360,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = contacts/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = contacts/main.m; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
+		1F39297D92A143DB977273E7 /* libRCTContactsWrapper.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTContactsWrapper.a; sourceTree = "<group>"; };
 		2D02E47B1E0B4A5D006451C7 /* contacts-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "contacts-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* contacts-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "contacts-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -361,6 +370,7 @@
 		7A63E21AE147496B81425394 /* libRNContactsPicker.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNContactsPicker.a; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
+		B2E19C206E7F4D0098A1EF06 /* ContactsWrapper.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = ContactsWrapper.xcodeproj; path = "../node_modules/react-native-contacts-wrapper/ios/ContactsWrapper.xcodeproj"; sourceTree = "<group>"; };
 		C9D78C8ED17F4988BA580F87 /* libRNKiperContacts.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNKiperContacts.a; sourceTree = "<group>"; };
 		E6C6DABAA5214E5E884348FC /* RNContactsPicker.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNContactsPicker.xcodeproj; path = "../node_modules/react-native-contacts-picker/ios/RNContactsPicker.xcodeproj"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -393,6 +403,7 @@
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				FF731948864C429D9BDA9E58 /* libRNContactsPicker.a in Frameworks */,
 				2FF8849AAF4549AFA21F1B95 /* libRNKiperContacts.a in Frameworks */,
+				D65792E406FE40AC8E22A896 /* libRCTContactsWrapper.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -581,6 +592,7 @@
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				E6C6DABAA5214E5E884348FC /* RNContactsPicker.xcodeproj */,
 				3794A229CBDB47E9BBF08B1B /* RNKiperContacts.xcodeproj */,
+				B2E19C206E7F4D0098A1EF06 /* ContactsWrapper.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -629,11 +641,20 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		AE3B4CB12132986A006E0B16 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				AE3B4CB52132986A006E0B16 /* libRCTContactsWrapper.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		AEAADBBC21316AC800FED8AE /* Recovered References */ = {
 			isa = PBXGroup;
 			children = (
 				7A63E21AE147496B81425394 /* libRNContactsPicker.a */,
 				C9D78C8ED17F4988BA580F87 /* libRNKiperContacts.a */,
+				1F39297D92A143DB977273E7 /* libRCTContactsWrapper.a */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -769,6 +790,10 @@
 			projectDirPath = "";
 			projectReferences = (
 				{
+					ProductGroup = AE3B4CB12132986A006E0B16 /* Products */;
+					ProjectRef = B2E19C206E7F4D0098A1EF06 /* ContactsWrapper.xcodeproj */;
+				},
+				{
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
 				},
@@ -1095,6 +1120,13 @@
 			remoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		AE3B4CB52132986A006E0B16 /* libRCTContactsWrapper.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTContactsWrapper.a;
+			remoteRef = AE3B4CB42132986A006E0B16 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		AEAADC282131731100FED8AE /* libRNContactsPicker.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1251,6 +1283,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = contactsTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1259,6 +1292,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1278,6 +1312,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = contactsTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1286,6 +1321,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1307,6 +1343,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = contacts/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1331,6 +1368,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = contacts/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1361,6 +1399,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "contacts-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1368,6 +1407,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1397,6 +1437,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "contacts-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1404,6 +1445,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1432,6 +1474,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "contacts-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1439,6 +1482,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1467,6 +1511,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
 					"$(SRCROOT)/../node_modules/react-native-kiper-contacts/ios",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "contacts-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1474,6 +1519,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",

huiliaoAPP/android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-contacts-wrapper')
     compile project(':react-native-contacts-picker')
     compile project(':react-native-image-crop-picker')
     compile fileTree(dir: "libs", include: ["*.jar"])

huiliaoAPP/android/app/src/main/java/com/huiliaoapp/MainApplication.java

@@ -3,6 +3,7 @@ package com.huiliaoapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.lynxit.contactswrapper.ContactsWrapperPackage;
 import com.xb.contactpicker.ReactNativeContacts;
 import com.reactnative.ivpusic.imagepicker.PickerPackage;
 import com.facebook.react.ReactNativeHost;
@@ -25,6 +26,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ContactsWrapperPackage(),
             new ReactNativeContacts(),
             new PickerPackage()
       );

huiliaoAPP/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'huiliaoAPP'
+include ':react-native-contacts-wrapper'
+project(':react-native-contacts-wrapper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-contacts-wrapper/android/app')
 include ':react-native-contacts-picker'
 project(':react-native-contacts-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-contacts-picker/android')
 include ':react-native-image-crop-picker'

huiliaoAPP/index.js

@@ -4,4 +4,5 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 
+
 AppRegistry.registerComponent(appName, () => App);

huiliaoAPP/ios/huiliaoAPP.xcodeproj/project.pbxproj

@@ -21,6 +21,7 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
+		22FA7E94BA01484D85CF4080 /* libRCTContactsWrapper.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F4E8CB53ED554B1CB24E57F9 /* libRCTContactsWrapper.a */; };
 		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		2D02E4C21E0B4AEC006451C7 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
@@ -319,6 +320,13 @@
 			remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
 			remoteInfo = RCTBlob;
 		};
+		AE3B4CFF2132995A006E0B16 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 79CCA97F54174204BA6D55E9 /* ContactsWrapper.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2B58405A1D10DE8700235F31;
+			remoteInfo = RCTContactsWrapper;
+		};
 		AE9332AB212FD00E00A82ECC /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = DDD93A23D5194D9E8D22AB47 /* imageCropPicker.xcodeproj */;
@@ -377,12 +385,14 @@
 		3B01B1EB32104611B4BD75FB /* libimageCropPicker.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libimageCropPicker.a; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
+		79CCA97F54174204BA6D55E9 /* ContactsWrapper.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = ContactsWrapper.xcodeproj; path = "../node_modules/react-native-contacts-wrapper/ios/ContactsWrapper.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
 		AE9332AD212FD01900A82ECC /* RSKImageCropper.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = RSKImageCropper.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AE9332B1212FD01C00A82ECC /* QBImagePicker.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = QBImagePicker.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		B67DBD86D72F4F5596A86A19 /* libRNContactsPicker.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNContactsPicker.a; sourceTree = "<group>"; };
 		DDD93A23D5194D9E8D22AB47 /* imageCropPicker.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = imageCropPicker.xcodeproj; path = "../node_modules/react-native-image-crop-picker/ios/imageCropPicker.xcodeproj"; sourceTree = "<group>"; };
+		F4E8CB53ED554B1CB24E57F9 /* libRCTContactsWrapper.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTContactsWrapper.a; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -415,6 +425,7 @@
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				AC0E38A9407146FD97D072A4 /* libimageCropPicker.a in Frameworks */,
 				3A467E62F5A64656A979023B /* libRNContactsPicker.a in Frameworks */,
+				22FA7E94BA01484D85CF4080 /* libRCTContactsWrapper.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -603,6 +614,7 @@
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				DDD93A23D5194D9E8D22AB47 /* imageCropPicker.xcodeproj */,
 				268208B1EC93416CB5EA17A7 /* RNContactsPicker.xcodeproj */,
+				79CCA97F54174204BA6D55E9 /* ContactsWrapper.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -653,11 +665,20 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		AE3B4CFC2132995A006E0B16 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				AE3B4D002132995A006E0B16 /* libRCTContactsWrapper.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		AE933280212FD00D00A82ECC /* Recovered References */ = {
 			isa = PBXGroup;
 			children = (
 				3B01B1EB32104611B4BD75FB /* libimageCropPicker.a */,
 				B67DBD86D72F4F5596A86A19 /* libRNContactsPicker.a */,
+				F4E8CB53ED554B1CB24E57F9 /* libRCTContactsWrapper.a */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -794,6 +815,10 @@
 			projectDirPath = "";
 			projectReferences = (
 				{
+					ProductGroup = AE3B4CFC2132995A006E0B16 /* Products */;
+					ProjectRef = 79CCA97F54174204BA6D55E9 /* ContactsWrapper.xcodeproj */;
+				},
+				{
 					ProductGroup = AE9332A8212FD00E00A82ECC /* Products */;
 					ProjectRef = DDD93A23D5194D9E8D22AB47 /* imageCropPicker.xcodeproj */;
 				},
@@ -1120,6 +1145,13 @@
 			remoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		AE3B4D002132995A006E0B16 /* libRCTContactsWrapper.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTContactsWrapper.a;
+			remoteRef = AE3B4CFF2132995A006E0B16 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		AE9332AC212FD00E00A82ECC /* libimageCropPicker.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1275,6 +1307,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = huiliaoAPPTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1282,6 +1315,7 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1301,6 +1335,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = huiliaoAPPTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1308,6 +1343,7 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1330,6 +1366,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = huiliaoAPP/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1355,6 +1392,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = huiliaoAPP/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1385,12 +1423,14 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "huiliaoAPP-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1420,12 +1460,14 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "huiliaoAPP-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1454,12 +1496,14 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "huiliaoAPP-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1488,12 +1532,14 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-image-crop-picker/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-contacts-picker/ios/RNContactsPicker",
+					"$(SRCROOT)/../node_modules/react-native-contacts-wrapper/ios/RCTContactsWrapper",
 				);
 				INFOPLIST_FILE = "huiliaoAPP-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",

huiliaoAPP/package.json

@@ -13,10 +13,12 @@
     "leancloud-realtime": "^4.2.0",
     "leancloud-realtime-plugin-typed-messages": "^3.0.1",
     "leancloud-storage": "^3.10.0",
+    "pinyin4js": "^1.3.5",
     "prop-types": "^15.5.10",
     "react": "16.4.1",
     "react-native": "0.56.0",
     "react-native-contacts-picker": "^0.0.7",
+    "react-native-contacts-wrapper": "^0.2.4",
     "react-native-filesystem": "^0.1.0",
     "react-native-image-crop-picker": "^0.21.1",
     "react-native-keyboard-aware-scroll-view": "^0.7.0",

huiliaoAPP/src/components/BackButton.js

@@ -1,14 +1,15 @@
 import React,{Component} from 'react';
 
 import {View,Image} from 'react-native';
+import Device from '../tool/Device'
 
 
  class BackButton extends Component{
 
     render(){
         return (
-            <View style={{paddingLeft:11,paddingRight:6}}>
-                <Image source={require('../../assets/2x/return.png')} style={{height:19,width:10}}></Image>
+            <View style={{paddingLeft:Device.scale(11),paddingRight:Device.scale(6)}}>
+                <Image source={require('../../assets/2x/return.png')} style={{height:Device.scale(19),width:Device.scale(10)}}></Image>
             </View>
     )
     }

huiliaoAPP/src/components/LoginInput.js

@@ -1,6 +1,8 @@
 import React,{Component} from 'react';
 import {View ,Image,TextInput,StyleSheet,Text,Button} from  'react-native';
 
+import {Device,Icon} from '../tool'
+
 class LoginInput extends Component{
     constructor(props){
         super(props)
@@ -59,7 +61,7 @@ class LoginInput extends Component{
                     return (
                         <Image
                         style={styles.lockimage}
-                         source={require('../../assets/2x/Login/lock-click.png')}
+                         source={Icon.Login.lockClick}
                         >
                         </Image>
                     )
@@ -67,7 +69,7 @@ class LoginInput extends Component{
                     return (
                         <Image
                         style={styles.lockimage}
-                         source={require('../../assets/2x/Login/lock.png')}
+                         source={Icon.Login.lock}
                         >
                         </Image>
                     )
@@ -78,7 +80,7 @@ class LoginInput extends Component{
                     return (
                         <Image
                         style={styles.phoneimage}
-                         source={require('../../assets/2x/Login/phone-click.png')}
+                         source={Icon.Login.phoneClick}
                         >
                         </Image>
                     )
@@ -86,7 +88,7 @@ class LoginInput extends Component{
                     return (
                         <Image
                         style={styles.phoneimage}
-                         source={require('../../assets/2x/Login/phone.png')}
+                         source={Icon.Login.phone}
                         >
                         </Image>
                     )
@@ -110,7 +112,7 @@ class LoginInput extends Component{
                     secureTextEntry={type==='password'}
                     value={this.props.text}
                     placeholder={placeholder} 
-                    style={[styles.input,{height:35,padding:0}]} />
+                    style={[styles.input,{height:Device.scale(35),padding:0}]} />
                 </View>
                 
 
@@ -122,8 +124,8 @@ class LoginInput extends Component{
 
 const styles = StyleSheet.create({
     item:{
-        width:266,
-        height:35,
+        width:Device.scale(266),
+        height:Device.scale(35),
         borderBottomColor:'#f2f2f2',
         borderBottomWidth:1,
         borderStyle:'solid',
@@ -132,26 +134,26 @@ const styles = StyleSheet.create({
         
     },
     imageBox:{
-        width:20,
-        height:20,
-        marginLeft:15,
-        marginRight:7.5,
+        width:Device.scale(20),
+        height:Device.scale(20),
+        marginLeft:Device.scale(15),
+        marginRight:Device.scale(7.5),
         justifyContent:'center'
         
     },
     lockimage:{
-        width:13.5,
-        height:15.5
+        width:Device.scale(13.5),
+        height:Device.scale(15.5)
     },
     phoneimage:{
-        width:12.5,
-        height:16.5
+        width:Device.scale(12.5),
+        height:Device.scale(16.5)
     },
     inputView:{
 
     },
     input:{
-        width:180        
+        width:Device.scale(180)        
     }
 
 })

huiliaoAPP/src/components/RightButton.js

@@ -0,0 +1,30 @@
+import React,{Component} from 'react';
+
+import {View,Image,TouchableOpacity} from 'react-native';
+import Device from '../tool/Device'
+
+
+ class BackButton extends Component{
+     constructor(props){
+         super(props)
+     }
+    render(){
+        const {Icon,Click} =this.props
+        
+        return (
+            <TouchableOpacity onPress={
+                ()=>{
+                    Click()
+                }
+            }>
+                <View style={{paddingRight:Device.scale(11),paddingLeft:Device.scale(11)}}>
+                     <Image source={Icon} style={[{height:Device.scale(20),width:Device.scale(17.5)},this.props.style]}></Image>
+                 </View>
+            </TouchableOpacity>
+            
+    )
+    }
+
+}
+
+export default BackButton;

huiliaoAPP/src/components/TabBarItem.js

@@ -1,13 +1,14 @@
 
 import React,{Component} from 'react';
 import {Image} from 'react-native';
+import Device from '../tool/Device'
  
 export default class TabBarItem extends Component {
  
     render() {
         return(
             <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
-                style={ { tintColor:this.props.tintColor,width:21,height:21 } }
+                style={ { tintColor:this.props.tintColor,width:Device.scale(21),height:Device.scale(21) } }
             />
         )
     }

huiliaoAPP/src/navigators/BottomTabNavigator.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import {createBottomTabNavigator,createSwitchNavigator} from 'react-navigation';
+import {createBottomTabNavigator} from 'react-navigation';
 import TabBarItem from '../components/TabBarItem';
+import Device from '../tool/Device'
+import {Text,DeviceEventEmitter} from 'react-native'
+import {Icon } from '../tool'
+
+import  RightButton from "../components/RightButton";
 
 //mine
 import Mine  from '../pages/Mine';
@@ -61,14 +66,18 @@ const BottomTabNavigator = createBottomTabNavigator(
   {
     tabBarPosition: 'bottom',
     animationEnabled: false,
-    // initialRouteName:'MineTab',
+    initialRouteName:'ContactTab',
     tabBarOptions:{
       activeTintColor:'#1c8ff5',
       inactiveTintColor:'#828383',
-      style:{backgroundColor:'#ffffff',},
+      style:{
+        borderTopColor:'rgba(0,0,0,0.1)',
+        borderTopWidth:1,
+        backgroundColor:'#fff'
+      },
       labelStyle: {
-            fontSize: 12, // 文字大小
-        }
+            fontSize: Device.scale(12), // 文字大小
+      },
     }
   }
 );
@@ -76,17 +85,36 @@ const BottomTabNavigator = createBottomTabNavigator(
 
 // // export default TabNav;
 BottomTabNavigator.navigationOptions = ({ navigation }) => {
+
+  console.log(navigation)
   let { routeName } = navigation.state.routes[navigation.state.index];
-  let title;
+
+  console.log(routeName)
+  let title,headerRight
   if (routeName === 'MessageTab') {
     title = '消息';
+    headerRight=(
+      <RightButton 
+        Icon={Icon.Message.add}
+        Click={()=>{
+          navigation.dispatch({type:'OPENMENUMESSAGE'})
+      }} />)
+
   } else if (routeName === 'ContactTab') {
     title = '通讯录';
+    headerRight=(
+      <RightButton 
+        Icon={Icon.Contact.add}
+        Click={()=>{
+          DeviceEventEmitter.emit('OPENMENUCONTACT');
+          // navigation.dispatch({type:'OPENMENUCONTACT'})
+        }} />)
   }else if(routeName === 'MineTab'){
     title = '我的';
   }
   return {
     title,
+    headerRight,
   };
 };
 

huiliaoAPP/src/navigators/StackNavigator.js

@@ -3,6 +3,20 @@ import React from 'react';
 import { createStackNavigator} from 'react-navigation';
 import {Platform,StatusBar} from 'react-native';
 import BottomTabNavigator from './BottomTabNavigator'
+import {Device} from '../tool'
+
+
+
+// 先引入这个方法
+// import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
+
+// // 在StackNavigator配置headerMode的地方，使用transitionConfig添加
+// {
+//     headerMode: 'screen',
+//     transitionConfig:()=>({
+//         screenInterpolator:CardStackStyleInterpolator.forHorizontal,
+//     })
+// }
 
 
 import BackButtom from '../components/BackButton';
@@ -23,12 +37,27 @@ import Notice from '../pages/Mine/Notice';
 
 //contact
 
+
+import AddFriend from '../pages/Contact/AddFriend'
+import DetailedInfo from '../pages/Contact/DetailedInfo'
+import FriendsValidation from '../pages/Contact/FriendsValidation'
+import NewFriend from '../pages/Contact/NewFriend'
+import Search from '../pages/Contact/Search'
+
+
 let  headerStyle={}
+// if(Platform.OS==='android'){
+//     headerStyle ={
+//       paddingTop:StatusBar.currentHeight,
+//       height:40 + StatusBar.currentHeight +15
+//     }
+//     console.log(StatusBar.currentHeight)
+// }
 if(Platform.OS==='android'){
-    headerStyle ={
-      paddingTop:StatusBar.currentHeight,
-      height:40 + StatusBar.currentHeight +15
-    }
+  headerStyle ={
+    paddingTop:Device.statusBarHeight,
+    height:Device.navBarHeight
+  }
 }
 
 
@@ -47,6 +76,11 @@ const StackNavigator = createStackNavigator({
 
   //contact  page
 
+  AddFriend:{screen:AddFriend},
+  DetailedInfo:{screen:DetailedInfo},
+  FriendsValidation:{screen:FriendsValidation},
+  NewFriend:{screen:NewFriend},
+  Search:{screen:Search},
   
 },{
   // headerMode: 'none', // 此参数设置不渲染顶部的导航条
@@ -57,10 +91,10 @@ const StackNavigator = createStackNavigator({
     headerBackImage:BackButtom,
     headerTintColor:'#ffffff',
     headerBackTitleStyle:{
-      fontSize:15
+      fontSize:Device.scale(15)
     },
     headerTitleStyle:{
-      fontSize:18,  //header 样式设置，
+      fontSize:Device.scale(18),  //header 样式设置，
       // flex: 1,
       // textAlign:'center',
       // backgroundColor:'#000'

huiliaoAPP/src/navigators/SwitchNavigator.js

@@ -12,7 +12,7 @@ const SwitchNavigator = createSwitchNavigator({
   StackNavigator
 },
 {
-  initialRouteName:'Login'
+  initialRouteName:'StackNavigator'
 })
 
 

huiliaoAPP/src/pages/Contact/AddFriend/index.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput } from 'react-native';
+import Button from 'antd-mobile-rn/lib/button';
+import { List,Switch,SearchBar } from 'antd-mobile-rn';
+
+import {Icon,Device} from '../../../tool'
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
+
+
+export default class AddFriend extends React.Component {
+  constructor(props) {
+    super(props);
+    this. state = {
+      //value: '美食',
+    };
+  }
+
+  static navigationOptions ={
+    title:'添加朋友'
+   }
+  onBlur = (value) => {
+   //跳转
+  }
+
+  render() {
+    return (
+      <View style={{backgroundColor:"#f0f0f0" }}>
+        <View style={styles.searchBarWrap}>
+          <View style={styles.serchWrap}>
+             <Image style={styles.searchImg} source={Icon.Contact.search}/>
+             <TextInput
+                style={[styles.searchBar,{padding:0}]}
+                placeholder="手机号/ID号搜索"
+              //  onFocus
+              />
+          </View>
+        </View>
+        <View style={styles.idTitle}>
+          <Text style={styles.idLabel}>我的ID号:12345</Text>
+          <Image style={styles.idEWM}  source={Icon.Contact.code}/>
+        </View>
+       
+        <View style={styles.listWrap}>
+          <View style={styles.list}>
+             <Image style={styles.scanImg} source={Icon.Contact.scan}/>
+             <View style={styles.listTitle}>
+               <Text style={styles.listOne}>扫一扫</Text>
+               <Text style={styles.listTwo}>扫描二维码名片</Text>
+             </View>
+             <Image style={styles.inImg} source={Icon.in}/>
+          </View>
+          <View style={styles.list}>
+             <Image style={styles.scanImg} source={Icon.Contact.phoneCall}/>
+             <View style={styles.listTitle}>
+               <Text style={styles.listOne}>手机联系人</Text>
+               <Text style={styles.listTwo}>添加或邀请通讯录中的朋友</Text>
+             </View>
+             <Image style={styles.inImg}  source={Icon.in}/>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  view:{
+    backgroundColor:"#000",
+    height:50,
+  },
+
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  searchBarWrap:{
+    backgroundColor:'#f0f0f0',
+    height:58,
+    // paddingLeft:8,
+    // paddingRight:8,
+    // paddingTop:11,
+    // paddingBottom:11,
+  },
+  serchWrap:{
+    borderRadius:8,
+    height:36,
+    backgroundColor:"#fff",
+    flexDirection:"row",
+    alignItems:"center",
+    marginBottom:11,
+    marginTop:11,
+    marginLeft:8,
+    marginRight:8,
+  },
+  searchImg:{
+    width:17,
+    height:17,
+     marginLeft:8,
+     marginRight:6,
+  },
+  searchBar:{
+    width:320,
+    paddingBottom:0,
+    padding:0,
+    height:36,
+  },
+  idTitle:{
+    flexDirection:"row",
+    justifyContent:"center",
+    alignItems:"center",
+    height:58,
+    paddingBottom:24
+  },
+  idLabel:{
+    fontSize:10,
+    color:"#9b9a9a",
+    paddingRight:5
+  },
+  idEWM:{
+    width:17,
+    height:17,
+  },
+  phoneImg:{
+    width:23,
+    height:32,
+    marginBottom:8,
+    marginTop:23,
+  },
+  phoneCont:{  
+    height:99,
+    backgroundColor:"#fff",
+    flexDirection:"column",
+    alignItems: 'center',
+    borderTopColor:'#000',
+    borderBottomColor:'#000',
+    borderTopWidth:1,
+    borderBottomWidth:1,
+    borderTopColor:"#d8d8d8",
+    borderBottomColor:"#d8d8d8",
+  },
+  labelName:{
+    fontSize:11,
+    color:'#858484',
+    
+   
+  },
+  listWrap:{
+    paddingLeft:10,
+    marginTop:10,
+    backgroundColor:"#FFF",
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    borderTopColor:"#e5e5e5",
+    borderTopWidth:1,
+  },
+  list:{
+    height:55,
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    flexDirection:"row",
+    justifyContent:"center",
+    alignItems:"center",
+    paddingRight:10,
+    },
+  scanImg:{
+    width:38,
+    height:38,
+  },
+  inImg:{
+    width:9,
+    height:14,
+  },
+  listTitle:{
+    flex:1,
+    paddingLeft:10,
+  },
+  listOne:{
+    fontSize:14,
+    color:"#000",
+  },
+  listTwo:{
+    fontSize:10,
+    color:"#000",
+    marginTop:8,
+    opacity:0.6
+  },
+  isAdd:{
+    width:55,
+    height:26,
+    backgroundColor:"#1bc3fa",
+    borderRadius:5,
+    fontSize:13,
+    color:"#fff",
+    lineHeight:26,
+    textAlign:"center"
+  }
+});

huiliaoAPP/src/pages/Contact/CheckValidation/index.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput } from 'react-native';
+import { List,Switch,SearchBar,Button } from 'antd-mobile-rn';
+import {Icon,Device} from '../../../tool'
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
+
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this. state = {
+      //value: '美食',
+    };
+  }
+  static navigationOptions ={
+    title:'详细资料'
+   }
+  onBlur = (value) => {
+   //跳转
+  }
+
+  render() {
+    return (
+      <View style={{ marginTop: 30,backgroundColor:"#f0f0f0",flex:1 }}>
+        <View style={styles.listWrap}>
+           <Image style={styles.scanImg} source={Icon.Contact.code}/>
+           <View style={styles.info}>
+             <Text style={styles.infoName}>春花</Text>
+             <Text style={styles.infoId}>ID:123456</Text>
+           </View>
+        </View>
+        <View style={styles.textWrap}>
+          <TextInput
+              style={styles.input}
+              placeholder="手机号/ID号搜索"
+              multiline     
+            />
+        </View>
+        <View>
+          <Button style={styles.addTitle}>
+            <Text  style={styles.addfriendBotton}>通过验证</Text>
+          </Button>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  view:{
+    backgroundColor:"#000",
+    height:50,
+  },
+
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  listWrap:{
+    paddingLeft:10,
+    height:80,
+    backgroundColor:"#FFF",
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    borderTopColor:"#e5e5e5",
+    borderTopWidth:1,
+   flexDirection:"row",
+    alignItems:"center",
+    justifyContent:"center"
+  },
+
+  scanImg:{
+    width:49,
+    height:49,
+    borderRadius:5,
+    marginLeft:10,
+    marginRight:12,
+  },
+  info:{
+    flex:1
+  },
+  infoName:{
+    color:"#000",
+    fontSize:16
+  },
+  infoId:{
+    color:"#7e7e7e",
+    fontSize:14,
+    marginTop:13,
+  },
+  addTitle:{
+    marginLeft:15,
+    marginRight:15,
+    backgroundColor:"#1bc3fa",
+    height:40,
+    borderRadius:5,
+  },
+  addfriendBotton:{
+    color:"#fff",
+    fontSize:17,
+    textAlign:"center",
+    lineHeight:40,
+  },
+  textWrap:{
+    paddingLeft:10,
+    paddingRight:10,
+    paddingTop:10,
+    paddingBottom:20,
+  },
+  input:{
+    borderRadius:5,
+    borderWidth:1,
+    borderColor:"#cecece",
+    fontSize:13,
+    color:"#333333",
+    paddingTop:5,
+    paddingLeft:10,
+    height:115,
+    lineHeight:23,
+  }
+
+});

huiliaoAPP/src/pages/Contact/DetailedInfo/index.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput } from 'react-native';
+import { List,Switch,SearchBar,Button } from 'antd-mobile-rn';
+import {Icon,Device} from '../../../tool'
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
+
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this. state = {
+      //value: '美食',
+    };
+  }
+  static navigationOptions ={
+    title:'详细资料'
+   }
+  onBlur = (value) => {
+   //跳转
+  }
+
+  render() {
+
+    const {navigation } =this.props
+
+    return (
+      <View style={{backgroundColor:"#f0f0f0",flex:1 }}>
+        <View style={styles.listWrap}>
+           <Image style={styles.scanImg} source={Icon.Contact.search}/>
+           <View style={styles.info}>
+             <Text style={styles.infoName}>春花</Text>
+             <Text style={styles.infoId}>ID:123456</Text>
+           </View>
+        </View>
+        <View>
+          <Button style={styles.addTitle} onClick={
+            ()=>{
+              // 
+              navigation.navigate({ routeName:"FriendsValidation" })
+            }         
+          }>
+            <Text  style={styles.addfriendBotton}>添加好友</Text>
+          </Button>
+        </View>
+        <View>
+          <Button style={styles.addTitle}>
+            <Text  style={styles.addfriendBotton}>发消息</Text>
+          </Button>
+        </View>
+        <View>
+          <Button style={styles.addTitle1}>
+            <Text  style={styles.addfriendBotton1}>解除好友关系</Text>
+          </Button>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  listWrap:{
+    paddingLeft:10,
+    height:80,
+    backgroundColor:"#FFF",
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    borderTopColor:"#e5e5e5",
+    borderTopWidth:1,
+   flexDirection:"row",
+    alignItems:"center",
+    justifyContent:"center"
+  },
+
+  scanImg:{
+    width:49,
+    height:49,
+    borderRadius:5,
+    marginLeft:10,
+    marginRight:12,
+  },
+  info:{
+    flex:1
+  },
+  infoName:{
+    color:"#000",
+    fontSize:16
+  },
+  infoId:{
+    color:"#7e7e7e",
+    fontSize:14,
+    marginTop:13,
+  },
+  addTitle:{
+    marginLeft:15,
+    marginRight:15,
+    backgroundColor:"#1bc3fa",
+    height:40,
+    borderRadius:5,
+    marginTop:45,
+    marginBottom:11,
+  },
+  addfriendBotton:{
+    color:"#fff",
+    fontSize:17,
+    textAlign:"center",
+    lineHeight:40,
+  },
+  addTitle1:{
+    marginLeft:15,
+    marginRight:15,
+    backgroundColor:"#fff",
+    height:40,
+    borderRadius:5,
+    borderWidth:1,
+    borderColor:"#1bc3fa"
+  },
+  addfriendBotton1:{
+    color:"#1ac5f8",
+    fontSize:17,
+    textAlign:"center",
+    lineHeight:40,
+  },
+});

huiliaoAPP/src/pages/Contact/FriendsValidation/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput,TouchableOpacity } from 'react-native';
+import { List,Switch,SearchBar,Button,InputItem } from 'antd-mobile-rn';
+
+
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
+
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this. state = {
+      labelnum1: '',
+    };
+  }
+  static navigationOptions ={
+    title:'详细资料',
+    headerRight:(
+      <TouchableOpacity style={{paddingRigth:11}}>
+        <Text style={{fontSize:15,marginRight:11,color:'#053a6b'}}>发送</Text>
+      </TouchableOpacity>
+    )
+    
+  }
+  render() {
+   
+    return (
+      <View style={{backgroundColor:"#f0f0f0",flex:1 }}>
+        <View style={styles.label}>
+          <Text style={styles.labelName}>你需要发送验证申请，等待对方通过</Text>
+        </View>
+        <List style={styles.listWrap}>
+          <InputItem
+            style={styles.input}
+            clear
+            value={this.state.labelnum1}
+            onChange={(value) => {
+              this.setState({
+                labelnum1: value,
+              });
+            }}
+           // labelNumber={2}
+            placeholder="请输入验证信息"
+          >
+          </InputItem>
+        </List>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  view:{
+    backgroundColor:"#000",
+    height:50,
+  },
+
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label:{
+    flexDirection:"row",
+    height:35,
+    alignItems:"center",
+    backgroundColor:"#f0f0f0"
+  },
+  labelName:{
+    fontSize:13,
+    color:"#a7a7a7",
+    paddingLeft:11,
+  },
+  listWrap:{
+    height:50,
+    backgroundColor:"#ffffff",
+  },
+  input:{
+    height:50,
+    fontSize:16,
+    color:"#343434"
+  },
+  rightText:{
+    
+  }
+});

huiliaoAPP/src/pages/Contact/NewFriend/index.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput } from 'react-native';
+import Button from 'antd-mobile-rn/lib/button';
+import { List,Switch,SearchBar } from 'antd-mobile-rn';
+import {Icon,Device} from '../../../tool'
+import commonStyles from '../../../styles/styles'
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
+
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this. state = {
+      //value: '美食',
+    };
+  }
+  static navigationOptions ={
+    title:'新的朋友'
+   }
+  onBlur = (value) => {
+   //跳转
+  }
+
+  render() {
+    const btn=(hasClick)=>{
+      if(hasClick){
+        return (
+          // <Button></Button>
+          <Text>2345</Text>
+        )
+      }else{
+        return(
+          <Text>123</Text>
+        )
+        
+      }
+    
+    }
+    return (
+      <View style={commonStyles.page}>
+        <View style={styles.searchBarWrap}>
+          <View style={styles.serchWrap}>
+             <Image style={styles.searchImg} source={Icon.Contact.search}/>
+             <TextInput
+                style={[styles.searchBar,{padding:0}]}
+                placeholder="手机号/ID号搜索"
+              //  onFocus
+              />
+          </View>
+        </View>
+        <View style={styles.phoneCont}>
+          <Image style={styles.phoneImg} source={Icon.Contact.phone}/>
+          <Text style={styles.labelName} >添加手机联系人</Text>
+        </View>
+        <View style={styles.listWrap}>
+          <View style={styles.list}>
+             <Image 
+              style={styles.scanImg}
+              source={Icon.Contact.scan}
+              onPress={()=>{
+                alert(1)
+              }}
+              />
+             <View style={styles.listTitle}>
+               <Text style={styles.listOne}>胡桃夹子</Text>
+               <Text style={styles.listTwo}>可以加好友吗可以加好友吗可以加好友吗可以加好友吗</Text>
+             </View>
+             <View style={styles.isAdd}>
+              <Text style={styles.isAdd1}>已添加</Text>
+             </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+
+  searchBarWrap:{
+    backgroundColor:'#f0f0f0',
+    height:Device.scale(58),
+  },
+  serchWrap:{
+    borderRadius:Device.scale(8),
+    height:Device.scale(36),
+    backgroundColor:"#fff",
+    flexDirection:"row",
+    alignItems:"center",
+    marginBottom:Device.scale(11),
+    marginTop:Device.scale(11),
+    marginLeft:Device.scale(8),
+    marginRight:Device.scale(8),
+  },
+  searchImg:{
+    width:Device.scale(17),
+    height:Device.scale(17),
+     marginLeft:Device.scale(8),
+     marginRight:Device.scale(6),
+  },
+  searchBar:{
+    width:Device.scale(320),
+    paddingBottom:0,
+    padding:0,
+    height:Device.scale(36),
+  },
+  phoneImg:{
+    width:Device.scale(23),
+    height:Device.scale(32),
+    marginBottom:Device.scale(8),
+    marginTop:Device.scale(23),
+  },
+  phoneCont:{  
+    height:Device.scale(99),
+    backgroundColor:"#fff",
+    flexDirection:"column",
+    alignItems: 'center',
+    borderTopColor:'#000',
+    borderBottomColor:'#000',
+    borderTopWidth:1,
+    borderBottomWidth:1,
+    borderTopColor:"#d8d8d8",
+    borderBottomColor:"#d8d8d8",
+  },
+  labelName:{
+    fontSize:Device.scale(11),
+    color:'#858484',
+  },
+  listWrap:{
+    paddingLeft:Device.scale(10),
+    marginTop:Device.scale(10),
+    backgroundColor:"#FFF",
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    borderTopColor:"#e5e5e5",
+    borderTopWidth:1,
+  },
+  list:{
+    height:Device.scale(55),
+    borderBottomColor:"#e5e5e5",
+    borderBottomWidth:1,
+    flexDirection:"row",
+    justifyContent:"center",
+    alignItems:"center",
+    paddingRight:Device.scale(10),
+    },
+  scanImg:{
+    width:Device.scale(38),
+    height:Device.scale(38),
+  },
+  listTitle:{
+    flex:1,
+    paddingLeft:Device.scale(10),
+  },
+  listOne:{
+    fontSize:Device.scale(14),
+    color:"#000",
+  },
+  listTwo:{
+    fontSize:Device.scale(10),
+    color:"#000",
+    opacity:0.6,
+    marginTop:8,
+    width:Device.scale(190),
+    height:Device.scale(12),
+    // marginHorizontal: 5, 
+    flexShrink: 1
+  },
+  isAdd:{
+    width:Device.scale(55),
+    height:Device.scale(26),
+    backgroundColor:"#1bc3fa",
+    borderRadius:Device.scale(5),
+  },
+  isAdd1:{
+    fontSize:Device.scale(13),
+    color:"#fff",
+    lineHeight:Device.scale(26),
+    textAlign:"center",
+  }
+});

huiliaoAPP/src/pages/Contact/Search/index.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Image, ScrollView,TextInput} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import {Icon,Device} from '../../../tool'
+
+export default class App extends React.Component {
+  state = {
+    value: '美食',
+  };
+  static navigationOptions ={
+   header:null
+  }
+
+  onChange = (value) => {
+    this.setState({ value });
+  }
+
+  clear = () => {
+    this.setState({ value: '' });
+  }
+  render() {
+    const {navigation} =this.props
+    return (
+     <View >
+          <View style={[styles.searchBarWrap,{paddingTop:Device.statusBarHeight,height:Device.navBarHeight}]}>
+              <View style={styles.serchWrap}>
+                <Image style={styles.searchImg} source={Icon.Contact.search}/>
+                <TextInput
+                    style={[styles.searchBar,{padding:0}]}
+                    placeholder="搜索"
+                  />
+                <Image style={styles.clear} source={Icon.Contact.close}/>
+              </View>
+              <View style={styles.cancel}>
+                 <Text style={styles.cancelTitle}
+                 onPress={()=>{
+                  navigation.goBack()
+                 }}
+                 >取消</Text>
+             </View>
+          </View>
+    
+         <View style={styles.tipWrap}>
+              <View style={styles.tip1}>
+                  <Image style={styles.iconImg1} source={Icon.Contact.searchBg}/>
+                  <View style={styles.tipTitleWrap}>
+                    <Text style={styles.search}>搜索:</Text>
+                    <Text style={styles.searchNum}>13281203999</Text>
+                  </View>
+              </View>
+          </View>
+     </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  searchBarWrap:{
+    backgroundColor:"#1c90f5",
+    flexDirection:"row",
+    alignItems:"center",
+  },
+  serchWrap:{
+    backgroundColor:"#fff",
+    flexDirection:"row",
+    alignItems:"center",
+    marginLeft:Device.scale(10),
+    borderRadius:Device.scale(5),
+    borderColor:"#c4c4c4",
+    flex:1
+  },
+  searchImg:{
+    width:Device.scale(17),
+    height:Device.scale(17),
+    marginLeft:Device.scale(8),
+    marginRight:Device.scale(6),
+  },
+  clear:{
+    width:Device.scale(15),
+    height:Device.scale(15),
+    marginRight:Device.scale(7),
+  },
+  searchBar:{
+    paddingBottom:0,
+    padding:0,
+    height:Device.scale(31),
+    flex:1
+  },
+  cancelTitle:{
+    color:"#fff",
+    fontSize:Device.scale(15),
+    marginRight:Device.scale(15),
+    marginLeft:Device.scale(10)
+  },
+  tipWrap:{
+    borderTopWidth:1,
+    borderTopColor:"#d8d8d8",
+    paddingLeft:Device.scale(11),
+  },
+  tip1:{
+    flexDirection:"row",
+    alignItems:"center",
+    height:Device.scale(55),
+    borderBottomWidth:1,
+    borderBottomColor:"#d8d8d8"
+  },
+  iconImg:{
+    width:Device.scale(38),
+    height:Device.scale(38),
+    borderRadius:Device.scale(5),
+    marginLeft:Device.scale(11),
+    marginRight:Device.scale(10),
+  },
+  iconImg1:{
+    width:Device.scale(38),
+    height:Device.scale(38),
+    marginRight:Device.scale(10),
+    borderRadius:Device.scale(5),
+  },
+  tipTitleWrap:{
+    flexDirection:"row",
+    alignItems:"center"
+  },
+  search:{
+    fontSize:Device.scale(16),
+    color:"#000"
+  },
+  searchNum:{
+    fontSize:Device.scale(16),
+    color:"#1ec6ff" 
+   }
+
+});

huiliaoAPP/src/pages/Contact/components/ContactList/SeparatorLine.js

@@ -0,0 +1,28 @@
+/**
+ * 列表的分割线
+ */
+
+import React from 'react'
+import {
+  View,
+  StyleSheet
+} from 'react-native'
+
+function SeparatorLine(props) {
+  const leftInset = props.leftInset ? props.leftInset : 0
+  const rightInset = props.rightInset ? props.rightInset : 0
+  const color = props.color ? props.color : 'rgba(0,0,0,0.1)'
+  return (
+    <View style={[
+        {
+            // marginLeft: 10,
+            // marginRight: 10,
+            backgroundColor: color,
+            height: 1
+        },
+        props.style
+    ]} />
+  )
+}
+
+export default SeparatorLine

huiliaoAPP/src/pages/Contact/components/ContactList/index.js

@@ -0,0 +1,262 @@
+import React, { Component } from 'react'
+import {
+  SafeAreaView,
+  View,
+  Text,
+  Image,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native'
+import {connect} from 'react-redux'
+import 'pinyin4js'
+import {Device,Icon} from '../../../../tool'
+import  SearchBar from '../searchBar'
+import ItemInContact from '../ItemInContact';
+import SeparatorLine from './SeparatorLine';
+
+
+ class ContactList extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      contacts: [
+        {id: 101, username: '阿菊',telphone:15528300169},
+        {id: 102, username: '爱莲',telphone:15528300169},
+        {id: 103, username: '昂立拉克',telphone:15528300169},
+        {id: 104, username: '冰冰',telphone:15528300169},
+        {id: 101, username: '阿菊1'},
+        {id: 105, username: '贝贝'},
+        {id: 106, username: '陈伟'},
+        {id: 107, username: '程浩'},
+        {id: 108, username: '点啥'},
+        {id: 109, username: '到啥'},
+        {id: 108, username: '鄂啥'},
+        {id: 108, username: '峨啥'},
+        {id: 108, username: '方啥'},
+        {id: 108, username: '付啥'},
+        {id: 108, username: '丰啥'},
+        {id: 108, username: '关啥'},
+        {id: 108, username: '高啥'},
+        {id: 108, username: '黄啥'},
+        {id: 108, username: '解啥'},
+        {id: 108, username: '文杰'},
+        {id: 108, username: '也文杰'},
+        {id: 108, username: 'YYH'},
+        {id: 108, username: 'yYH'},
+        {id: 108, username: '#*'},
+        {id: 108, username: '!*'},
+        {id: 108, username: '@*'},
+        {id: 108, username: '张龙'},
+        {id: 108, username: ' A张龙'},
+        {id: 108, username: 'B张龙'},
+      ],
+      labels: [],
+    }
+  }
+  componentWillMount() {
+
+    // console.log(this.props)
+    this._dataConvert(this._pySegSort(this.state.contacts, 'username'))
+
+  }
+  componentDidMount() {
+
+  }
+
+  // 排序并添加首字母
+  _pySegSort(arr, key) {
+    const letters = "abcdefghjklmnopqrstwxyz".split('')
+    let segs = []
+    let curr
+    let otherName = []
+
+    let t = new Date()
+
+    arr.map((a,m)=>{
+        let firstKey = a[key][0]
+        let reg = new RegExp("^[A-Za-z\u4e00-\u9fa5]+$");
+        if(!reg.test(firstKey)){
+            otherName.push(JSON.parse(JSON.stringify(a)))
+        }
+    })
+    letters.map((l,i) => {
+      curr = {label: l.toUpperCase(), data:[]}
+
+
+      arr.map((a,m) =>{
+        if(a[key]=='') return 
+        let firstKey = a[key][0]
+        let nameKey = PinyinHelper.convertToPinyinString(a[key], '', PinyinFormat.FIRST_LETTER)[0].toUpperCase()
+
+        if(nameKey===l.toUpperCase()){
+          curr.data.push(JSON.parse(JSON.stringify(a)))
+          arr[m][key]=''
+        }
+
+      })
+      if(curr.data.length) {
+        segs.push(curr)
+        curr.data.sort(function(a,b){
+          return a[key].localeCompare(b[key])
+        })
+      }
+    })
+
+    console.log(new Date() -t)
+    segs.push({
+        label:'#',
+        data:otherName
+    })
+    segs.unshift({
+        label:'@',
+        data:[]
+    })
+    return segs
+  }
+  // 转换成 FlatList 需要的数据
+  _dataConvert(names) {
+    if (!names || names.length === 0) {
+      return
+    }
+    let contacts = []
+    let labels = []
+    let index = 0
+    let labelItem = {}
+    names.map((item) => {
+      labelItem = {
+        index: index,
+        label: item.label
+      }
+      contacts.push(labelItem)
+      labels.push(labelItem)
+      index++
+      if (item.data && item.data.length > 0) {
+        item.data.map((nameItem) => {
+          contacts.push({ index: index, ...nameItem })
+          index++
+        })
+      }
+    })
+    this.setState({
+      contacts: contacts,
+      labels: labels
+    })
+  }
+
+  render() {
+    const { contacts, labels } = this.state
+    const {navigation} =this.props.props
+    const scollTo = (item) => {
+      // 当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。
+      this._flatList.scrollToIndex({viewPosition:0, index:item.index})
+    }
+    const renderItem = ({item}) => {
+      const onPress = () => {
+        navigation.navigate({ routeName:"DetailedInfo" })
+      }
+
+
+      if(item.index===0){
+          return (<SearchBar props={this.props.props}/>)
+      }
+      return (
+        item.id ?
+          <TouchableOpacity style={styles.listItem} onPress={onPress}>
+           <ItemInContact item={item} props={this.props.props}></ItemInContact>
+          </TouchableOpacity> :
+          <View style={styles.labelItem}>
+          {/* title */}
+            <Text style={styles.itemLabel}>{`${item.label}`}</Text> 
+          </View>
+      )
+    }
+    return (
+      <SafeAreaView style={styles.container}>
+        <FlatList data={contacts}
+                  keyExtractor={(item, index) => index + ''}
+                  ref={(flatList)=>this._flatList = flatList}
+                  ItemSeparatorComponent={() => <SeparatorLine />}
+                  showsVerticalScrollIndicator = {false}
+                  renderItem={renderItem}/>
+                   
+        <View style={styles.slideCtn}>
+          {labels.map((item) =>{
+              if(item.index===0 && item.label==='@'){
+                  return (
+                    <TouchableOpacity
+                    key={item.label}
+                    style={styles.labelCtn}
+                    onPress={()=> scollTo(item)}>
+                        <Image 
+                        style={{width:Device.scale(12),height:Device.scale(12)}}
+                        source={Icon.Contact.search}></Image>
+                    </TouchableOpacity>
+                  )
+              }
+              return (
+                <TouchableOpacity
+                key={item.label}
+                style={styles.labelCtn}
+                onPress={()=> scollTo(item)}>
+                <Text style={styles.slideLabel}>{item.label}</Text>
+              </TouchableOpacity>
+              )
+          }
+            
+          )}
+        </View>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
+  listItem: {
+    height: Device.scale(45),
+    justifyContent: 'center',
+    // marginLeft:Device.scale(20),
+    height:Device.scale(55)
+  },
+  labelItem: {
+    justifyContent: 'center',
+    backgroundColor: '#f0f0f0',
+    height:Device.scale(25)
+  },
+  itemLabel: {
+    fontSize: Device.scale(17),
+    color: 'rgba(0,0,0,0.5)',
+    marginLeft: Device.scale(10),
+    // fontWeight: 'bold',
+    fontSize:Device.scale(15)
+  },
+  itemName: {
+    fontSize: Device.scale(16),
+    color: '#4C5361',
+    marginLeft: Device.scale(10)
+  },
+  slideCtn: {
+    top: Device.scale(80),
+    right: 0,
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+  },
+  labelCtn: {
+    paddingLeft: Device.scale(10),
+    paddingRight: Device.scale(10),
+    paddingTop:Device.scale(3),
+    paddingBottom:Device.scale(3)
+  },
+  slideLabel: {
+    color: '#504f4f',
+    fontSize: Device.scale(9),
+  },
+})
+
+export default connect()(ContactList);

huiliaoAPP/src/pages/Contact/components/ItemInContact.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Image} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import {Icon,Device} from '../../../tool'
+export default class App extends React.Component {
+
+  constructor(props){
+    super(props)
+  }
+  render() {
+    const {username,telphone,head} = this.props.item
+
+    const {navigation} =this.props.props
+    return (
+          <View style={styles.tipWrap}>
+              <View style={styles.tip1}>
+                  <Image style={styles.iconImg1} source={Icon.Contact.newFriendIcon}/>
+                  <View style={styles.tipTitleWrap}>
+                    <Text style={styles.tipName}>{username}</Text>
+                    <Text style={styles.tipNum}>{telphone}</Text>
+                  </View>
+              </View>
+          </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tipWrap:{
+    paddingLeft:Device.scale(11),
+  },
+  tip1:{
+    flexDirection:"row",
+    alignItems:"center",
+    height:Device.scale(55),
+    // borderBottomWidth:1,
+    // borderBottomColor:"rgba(0,0,0,0.1)"
+  },
+  iconImg1:{
+    width:Device.scale(38),
+    height:Device.scale(38),
+    marginRight:Device.scale(10),
+    borderRadius:Device.scale(5),
+  },
+  tipTitleWrap:{
+    flex:1,
+  },
+  tipName:{
+    fontSize:Device.scale(14),
+    color:"#343434", 
+  },
+  tipNum:{
+    color:"#929292",
+    fontSize:Device.scale(13),
+    marginTop:Device.scale(8),
+  }
+});

huiliaoAPP/src/pages/Contact/components/searchBar.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Image, ScrollView,TextInput} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { List } from 'antd-mobile-rn';
+import {Icon,Device} from '../../../tool'
+import {connect} from 'react-redux'
+
+
+
+class SearchBar extends React.Component {
+
+  constructor(props){
+    super(props)
+  }
+
+  render() {
+    const {navigation} =this.props.props
+    return (
+      <View style={styles.searchBarWrap}>
+      <View style={styles.serchWrap}>
+         <Image style={styles.searchImg} source={Icon.Contact.search}/>
+         {/* <TextInput
+            style={[styles.searchBar,{padding:0}]}
+            placeholder="手机号/ID号搜索"
+          
+           onFocus={()=>{
+            navigation.navigate({ routeName:"Search" })
+           }}
+          /> */}
+          <Text
+             style={[styles.searchBar,{padding:0}]}
+             onPress={()=>{
+              navigation.navigate({ routeName:"Search" })
+             }}
+          >
+             手机号/ID号搜索
+          </Text>
+      </View>
+      <View style={styles.tip}>
+        <View style={[styles.tip1,{borderBottomWidth:1}]}
+        onTouchStart={()=>{
+          navigation.navigate({ routeName:"NewFriend" })
+        }}
+        
+        >
+          <Image style={styles.iconImg} source={Icon.Contact.newFriendIcon}/>
+          <Text style={styles.tipTitle}>新的朋友</Text>
+        </View>
+        <View style={styles.tip1}>
+          <Image style={styles.iconImg} source={Icon.Contact.groupChatIcon}/>
+          <Text style={styles.tipTitle}>群聊</Text>
+        </View>
+      </View>
+  </View>
+    );
+  }
+}
+
+export default  connect()(SearchBar) ;
+const styles = StyleSheet.create({
+  searchBarWrap:{
+    backgroundColor:'#f0f0f0',
+    height:Device.scale(170),
+  },
+  serchWrap:{
+    borderRadius:Device.scale(8),
+    height:Device.scale(36),
+    backgroundColor:"#fff",
+    flexDirection:"row",
+    alignItems:"center",
+    marginBottom:Device.scale(11),
+    marginTop:Device.scale(11),
+    marginLeft:Device.scale(10),
+    marginRight:Device.scale(10),
+    borderWidth:1,
+    borderColor:'#c4c4c4'
+  },
+  searchImg:{
+    width:Device.scale(17),
+    height:Device.scale(17),
+     marginLeft:Device.scale(8),
+     marginRight:Device.scale(6),
+  },
+  
+  searchBar:{
+    width:Device.scale(320),
+    paddingBottom:0,
+    padding:0,
+    height:Device.scale(36),
+    lineHeight:Device.scale(36),
+    color:'rgba(0,0,0,0.3)'
+  },
+  tip:{
+    borderTopWidth:1,
+    borderColor:"rgba(0,0,0,0.1)",
+    height:Device.scale(113),
+    backgroundColor:'#fff',
+    // borderBottomWidth:1
+  },
+
+  tip1:{
+    flexDirection:"row",
+    alignItems:"center",
+    height:Device.scale(55),
+    borderColor:"rgba(0,0,0,0.1)",
+    marginLeft:Device.scale(11),
+  },
+  iconImg:{
+    width:Device.scale(38),
+    height:Device.scale(38),
+    borderRadius:Device.scale(5),
+    marginRight:Device.scale(10),
+  }
+});

huiliaoAPP/src/pages/Contact/index.js

@@ -1,36 +1,82 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
 import React, {Component} from 'react';
 import {
     StyleSheet,
     Text,
     View,
-    Platform
+    Platform,
+    ScrollView,
+    DeviceEventEmitter
+    
 } from 'react-native';
 import ContactPickerBridge from 'react-native-contacts-picker';
+import ContactsWrapper from 'react-native-contacts-wrapper';
 import checkContactsPermission from '../../tool/requestPermission';
+import { connect } from 'react-redux';
+import ContactList from './components/ContactList'
+import searchBar from './components/searchBar'
+import Search from './Search'
+import NewFriend from './NewFriend'
+import FriendsValidation from './FriendsValidation'
+import DetailedInfo from './DetailedInfo'
+import AddFriend from './AddFriend'
 
+import BottomTabNavigator from '../../navigators/BottomTabNavigator'
 if(Platform.OS==='android'){
     checkContactsPermission()
 }
 
-
-export default class ContactPicker extends Component {
+class ContactPicker extends Component {
+    constructor(props){
+        super(props)
+    }
+    componentDidMount(){
+        const {navigation } =this.props
+        this.subscription = DeviceEventEmitter.addListener('OPENMENUCONTACT', ()=>{
+            navigation.navigate({ routeName:"AddFriend" })
+        });
+    
+    }
+        
+        
+        
+    componentWillUnmount(){
+    
+    this.subscription.remove();
+    
+    }
     render() {
         return (
-            <View style={styles.container}>
-                <Text style={styles.welcome} onPress={this.openContactPicker}>打开通讯录选择器</Text>
-                <Text style={styles.welcome} onPress={this.getAllContact}>获取全部通讯录</Text>
-                <Text style={styles.welcome} onPress={this.checkContactPermissions}>是否有通讯录权限</Text>
-            </View>
+            // <View style={styles.container}>
+            //     <Text style={styles.welcome} onPress={this.openContactPicker}>打开通讯录选择器</Text>
+            //     <Text style={styles.welcome} onPress={this.getAllContact}>获取全部通讯录</Text>
+            //     <Text style={styles.welcome} onPress={this.checkContactPermissions}>是否有通讯录权限</Text>
+            //     <Text style={styles.welcome} onPress={()=>{this.onButtonPressed()}}>另外一个</Text>
+            // </View>
+            <ScrollView>
+
+                <ContactList props={this.props}/>
+                <Search></Search>
+                <NewFriend></NewFriend>
+                <FriendsValidation></FriendsValidation>
+                <DetailedInfo></DetailedInfo>
+                <AddFriend></AddFriend>
+            </ScrollView>
+                
+                
+
         );
     }
-
+    onButtonPressed() {
+        ContactsWrapper.getContact()
+        .then((contact) => {
+            // Replace this code
+            console.log(contact);
+        })
+        .catch((error) => {
+            console.log("ERROR CODE: ", error.code);
+            console.log("ERROR MESSAGE: ", error.message);
+        });
+    }
     openContactPicker = () => {
         ContactPickerBridge.openContactPicker((result) => {
             console.log('openContactPicker ---->', JSON.stringify(result));
@@ -69,4 +115,15 @@ const styles = StyleSheet.create({
         color: '#333333',
         marginBottom: 5,
     },
-});
+});
+
+
+
+
+ContactPicker.navigationOptions ={
+        header: null
+}
+ const getHeaderButtonClick =(state)=>{
+    return {...state.menu}
+ }
+export default connect(getHeaderButtonClick)(ContactPicker);

huiliaoAPP/src/pages/Login/index.1.js

@@ -1,104 +0,0 @@
-/**
- * @flow
- */
-
-import React,{Component} from 'react';
-import { ScrollView, StatusBar,Text } from 'react-native';
-import {
-  SafeAreaView,
-  createStackNavigator,
-  createBottomTabNavigator,
-} from 'react-navigation';
-
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import Mine from '../Mine'
-import Setting from '../Mine/Setting';
-import QrCode from '../Mine/QrCode';
-const TabNav = createBottomTabNavigator(
-  {
-    MainTab: {
-      screen: Mine,
-      path: '/',
-      navigationOptions: {
-        title: 'mine',
-        tabBarLabel: 'mine',
-        tabBarIcon: ({ tintColor, focused }) => (
-          <Ionicons
-            name={focused ? 'ios-home' : 'ios-home-outline'}
-            size={26}
-            style={{ color: tintColor }}
-          />
-        ),
-      },
-    },
-    SettingsTab: {
-      screen: Setting,
-      path: '/settings',
-      navigationOptions: {
-        title: 'Settings',
-        tabBarIcon: ({ tintColor, focused }) => (
-          <Ionicons
-            name={focused ? 'ios-settings' : 'ios-settings-outline'}
-            size={26}
-            style={{ color: tintColor }}
-          />
-        ),
-      },
-    },
-    MessageTab: {
-        screen: QrCode,
-        path: '/message',
-        navigationOptions: {
-          title: 'message',
-          tabBarIcon: ({ tintColor, focused }) => (
-            <Ionicons
-              name={focused ? 'ios-settings' : 'ios-settings-outline'}
-              size={26}
-              style={{ color: tintColor }}
-            />
-          ),
-        },
-      },
-  },
-  {
-    tabBarPosition: 'bottom',
-    animationEnabled: false,
-    swipeEnabled: false,
-  }
-);
-
-
-// export default TabNav;
-TabNav.navigationOptions = ({ navigation }) => {
-  let { routeName } = navigation.state.routes[navigation.state.index];
-  let title;
-  if (routeName === 'SettingsTab') {
-    title = 'Settings';
-  } else if (routeName === 'MainTab') {
-    title = 'Home';
-  }
-  return {
-    title,
-  };
-};
-
-const StacksOverTabs = createStackNavigator({
-  Root: {
-    screen: TabNav,
-  },
-  NotifSettings: {
-    screen: QrCode,
-    navigationOptions: {
-      title: 'QrCode',
-    },
-  },
-  Profile: {
-    screen: QrCode,
-    path: '/people/:name',
-    navigationOptions: ({ navigation }) => ({
-      title: `${navigation.state.params.name}'s Profile!`,
-    }),
-  },
-});
-
-export default StacksOverTabs;

huiliaoAPP/src/pages/Login/index.js

@@ -5,6 +5,7 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
 import {Button} from 'antd-mobile-rn';
 import commonStyle from '../../styles/styles.js';
 import LoginInput from '../../components/LoginInput';
+import {Device ,Icon} from '../../tool'
 
 import Leancloud from '../../leancloud'
 
@@ -55,13 +56,13 @@ class LoginScreen extends Component{
         >  
         </StatusBar>  
         <View style={styles.bgView}>
-          <Image source={require('../../../assets/2x/Login/bg.png')} style={styles.bgViewImage}></Image>
+          <Image source={Icon.Login.bg} style={styles.bgViewImage}></Image>
         </View>
 
         <View style={[styles.form,{}]}>
-            <Text style={{fontSize:17,color:'#b3b3b3',marginTop:10}}>登录</Text>
-            <Image source={require('../../../assets/2x/Login/line.png')} style={{height:2,width:60,marginTop:10}}></Image>
-            <LoginInput type='text' style={{marginTop:45}}
+            <Text style={{fontSize:Device.scale(17),color:'#b3b3b3',marginTop:Device.scale(10)}}>登录</Text>
+            <Image source={Icon.Login.line} style={{height:2,width:Device.scale(60),marginTop:Device.scale(10)}}></Image>
+            <LoginInput type='text' style={{marginTop:Device.scale(45)}}
               onChange={(telphone)=>{
                 this.setState({
                   telphone
@@ -69,7 +70,7 @@ class LoginScreen extends Component{
               }}
               text={telphone}
             ></LoginInput>
-            <LoginInput type='password' placeholder='请输入密码' style={{marginTop:30}}
+            <LoginInput type='password' placeholder='请输入密码' style={{marginTop:Device.scale(30)}}
               onChange={(password)=>{
                 this.setState({
                   password
@@ -82,7 +83,7 @@ class LoginScreen extends Component{
           }
             style={styles.btn}
             >
-            <Text style={{fontSize:14}}>立即登录</Text>
+            <Text style={{fontSize:Device.scale(14)}}>立即登录</Text>
             </Button>
         </View>
         </KeyboardAwareScrollView>
@@ -92,28 +93,31 @@ class LoginScreen extends Component{
 }
 const styles = StyleSheet.create({
   bgView:{
-    width,
+    width:Device.scale(375),
     flex:1,
-    height:667,
+    height:Device.scale(667),
   },
   bgViewImage:{
-    width,
-    height:667,
+    width:Device.scale(375),
+    height:Device.scale(667),
   },
   form:{
-    width:325,
-    height:330,
-    left:24-(375-width)/2,
-    top:217,
+    width:Device.scale(325),
+    height:Device.scale(330),
+    left:Device.scale(24),
+    top:Device.scale(217),
     position:'absolute',
-    padding:26,
-    alignItems:'center'
+    padding:Device.scale(26),
+    alignItems:'center',
+    borderWidth:1,
+    borderColor:'red',
+    borderStyle:'solid'
   },
   btn:{
-    width:280,
-    height:40,
-    borderRadius:20,
-    marginTop:40
+    width:Device.scale(280),
+    height:Device.scale(40),
+    borderRadius:Device.scale(20),
+    marginTop:Device.scale(40)
   }
 
 });

huiliaoAPP/src/pages/Mine/Infomation/index.js

@@ -8,6 +8,8 @@ import ImagePicker from 'react-native-image-crop-picker';
 import commonStyle from '../../../styles/styles.js';
 // import FileSystem from 'react-native-filesystem';
 
+import {Device ,Icon} from '../../../tool';
+
 
 
 const Item = List.Item;
@@ -104,7 +106,7 @@ class Infomation extends Component {
                 cache: 'force-cache'
             }
         }else{
-            source = require('../../../../assets/icon.png')
+            source = Icon.icon
         }
         return (
             <View style={commonStyle.page}>
@@ -113,10 +115,10 @@ class Infomation extends Component {
                     style={commonStyle.item}
                     onClick={()=>{this.showActionSheet()}}
                     extra={
-                        <View style={{ width: 29, height: 29 ,borderRadius:5,overflow:'hidden'}}>
+                        <View style={{ width: Device.scale(29), height: Device.scale(29) ,borderRadius:Device.scale(5),overflow:'hidden'}}>
                             <Image
                         source={source}
-                        style={{ width: 29, height: 29 }}
+                        style={{ width: Device.scale(29), height: Device.scale(29) }}
                         />
                         </View>
                     }
@@ -163,8 +165,8 @@ class Infomation extends Component {
                     onClick={() => {this.push('QrCode')}}
                     extra={
                         <Image
-                        source={require('../../../../assets/2x/code.png')}
-                        style={{ width: 29, height: 29 }}
+                        source={Icon.Mine.code}
+                        style={{ width: Device.scale(29), height: Device.scale(29) }}
                         />
                     }
                     arrow="horizontal"
@@ -179,7 +181,7 @@ class Infomation extends Component {
 
 const styles = StyleSheet.create({
     title:{
-      fontSize:16
+      fontSize:Device.scale(16)
     }
   });
 const mapStateToProps = ({UserAction} )=> {

huiliaoAPP/src/pages/Mine/Notice/index.js

@@ -3,6 +3,7 @@ import { ScrollView} from 'react-native';
 import { StyleSheet, Text, View } from 'react-native';
 import { List,Switch } from 'antd-mobile-rn';
 import commonStyle from '../../../styles/styles.js';
+import Device from '../../../tool/Device';
 const Item = List.Item;
 const Brief = Item.Brief;
 
@@ -66,16 +67,16 @@ export default class Notice extends Component {
 
 const styles = StyleSheet.create({
   title:{
-    fontSize:16
+    fontSize:Device.scale(16)
   },
   explain:{
-    paddingTop:5,
-    paddingBottom:5,
-    lineHeight:16,
-    fontSize:12,
+    paddingTop:Device.scale(5),
+    paddingBottom:Device.scale(5),
+    lineHeight:Device.scale(16),
+    fontSize:Device.scale(12),
     color:"#000",
-    paddingLeft:16,
-    paddingRight:16,
+    paddingLeft:Device.scale(16),
+    paddingRight:Device.scale(16),
     opacity:0.4,
 
   }

huiliaoAPP/src/pages/Mine/QrCode/index.js

@@ -1,8 +1,8 @@
 import React,{Component} from 'react';
-import { StyleSheet, Text, View ,Image,Dimensions} from 'react-native';
+import { StyleSheet, Text, View ,Image} from 'react-native';
 import QRCode from 'react-native-qrcode';
 import {connect} from 'react-redux'
-const {width,height} = Dimensions.get('window');
+import Device from '../../../tool/Device';
 
 class QrCode extends Component {
     constructor(props){
@@ -38,7 +38,7 @@ class QrCode extends Component {
                  <View style={styles.QRBox}>
                  <QRCode
                     value={id}
-                    size={225}
+                    size={Device.scale(225)}
                     bgColor='black'
                     fgColor='white'/>
                  </View>
@@ -59,7 +59,7 @@ export default connect(mapStateToProps)(QrCode);
 const styles = StyleSheet.create({
     view:{
       backgroundColor:"#000",
-      height:50,
+      height:Device.scale(50),
     },
   
     container: {
@@ -75,33 +75,33 @@ const styles = StyleSheet.create({
     },
     bgImage:{
       position:"absolute",
-      top:65,
-      width:328,
-      height:443,
+      top:Device.scale(65),
+      width:Device.scale(328),
+      height:Device.scale(443),
       left:'50%',
-      marginLeft:-164
+      marginLeft:-Device.scale(164)
     },
     headBox:{
       flexDirection:"row",
       alignItems: 'center',
-      paddingLeft:39,
-      paddingTop:42,
+      paddingLeft:Device.scale(39),
+      paddingTop:Device.scale(42),
     },
     head:{
-      width:64,
-      height:64,
-      borderRadius:9,
+      width:Device.scale(64),
+      height:Device.scale(64),
+      borderRadius:Device.scale(9),
     },
     headTille:{
-      marginLeft:15
+      marginLeft:Device.scale(15)
     },
     nickName:{
-      lineHeight:31,
-      fontSize:16,
+      lineHeight:Device.scale(31),
+      fontSize:Device.scale(16),
     },
     ID:{
-      lineHeight:29,
-      fontSize:14,
+      lineHeight:Device.scale(29),
+      fontSize:Device.scale(14),
       color:"#000",
       opacity:0.5,
     },
@@ -110,18 +110,18 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent:'center',
       // marginLeft:54,
-      marginTop:41,
+      marginTop:Device.scale(41),
     },
     qrCode:{
-      width:225,
-      height:225,
+      width:Device.scale(255),
+      height:Device.scale(255),
     },
     info:{
       alignItems: 'center',
-      marginTop:25,
+      marginTop:Device.scale(25),
     },
     info1:{
-     fontSize:12,
+     fontSize:Device.scale(12),
      color:"#000",
      opacity:0.5,
     }

huiliaoAPP/src/pages/Mine/ReName/index.js

@@ -4,6 +4,7 @@ import { List ,InputItem, WingBlank,Button} from 'antd-mobile-rn';
 import commonStyle from '../../../styles/styles.js';
 import {connect} from 'react-redux'
 import Leancloud from '../../../leancloud'
+import Device from '../../../tool/Device'
 const Item = List.Item;
 const Brief = Item.Brief;
 
@@ -75,16 +76,16 @@ const mapStateToProps = ({UserAction} )=> {
   export default connect(mapStateToProps)(ReName);
 const styles = StyleSheet.create({
    botton:{
-     marginTop:29,
+     marginTop:Device.scale(29),
    },
    pressBotton:{
-     height:40,
-     borderRadius:5,
+     height:Device.scale(40),
+     borderRadius:Device.scale(5),
      backgroundColor:"#1bc3fa"
    },
    save:{
     color:"#fff",
-    fontSize:17,
+    fontSize:Device.scale(17),
    }
   });
   

huiliaoAPP/src/pages/Mine/RePassword/index.js

@@ -5,6 +5,7 @@ import { List ,InputItem, WhiteSpace, WingBlank,Button,Toast} from 'antd-mobile-
 import {connect} from 'react-redux';
 import commonStyle from '../../../styles/styles.js';
 import Leancloud from '../../../leancloud/index.js';
+import Device from '../../../tool/Device'
 const Item = List.Item;
 const Brief = Item.Brief;
 
@@ -109,24 +110,24 @@ const styles = StyleSheet.create({
         // height:50,
         // alignItems: 'center',
         justifyContent: 'center',
-        marginBottom:10,
+        marginBottom:Device.scale(10),
         
     },
     item:{
-        height:50,
-        paddingTop:5
+        height:Device.scale(50),
+        paddingTop:Device.scale(5)
     },
    botton:{
-     marginTop:29,
+     marginTop:Device.scale(29),
    },
    pressBotton:{
-     height:40,
-     borderRadius:5,
+     height:Device.scale(40),
+     borderRadius:Device.scale(5),
      backgroundColor:"#1bc3fa"
    },
    save:{
     color:"#fff",
-    fontSize:17,
+    fontSize:Device.scale(17),
    }
   });
   

huiliaoAPP/src/pages/Mine/Setting/index.js

@@ -4,6 +4,8 @@ import { StyleSheet, Text, View,AsyncStorage } from 'react-native';
 import { List,Button } from 'antd-mobile-rn';
 import commonStyle from '../../../styles/styles.js';
 
+import Device from '../../../tool/Device'
+
 const Item = List.Item;
 
 export default class Setting extends Component {
@@ -57,25 +59,25 @@ export default class Setting extends Component {
 
 const styles = StyleSheet.create({
   title:{
-    fontSize:16
+    fontSize:Device.scale(16)
   },
   explain:{
-    lineHeight:20,
-    fontSize:12,
+    lineHeight:Device.scale(20),
+    fontSize:Device.scale(12),
     color:"#000",
-    paddingLeft:16,
-    paddingRight:16,
+    paddingLeft:Device.scale(16),
+    paddingRight:Device.scale(16),
     opacity:0.4,
   },
  
   pressBotton:{
-    height:50,
+    height:Device.scale(50),
     backgroundColor:"#fff",
     borderWidth:0,
-    marginTop:61,
+    marginTop:Device.scale(61),
   },
   save:{
-   fontSize:16,
+   fontSize:Device.scale(16),
    color:"#3bcbfd"
   }
 });

huiliaoAPP/src/pages/Mine/index.js

@@ -3,6 +3,7 @@ import { View ,Text,Image,StyleSheet} from 'react-native';
 import commonStyle from '../../styles/styles.js';
 import { connect } from 'react-redux';
 import { List } from 'antd-mobile-rn';
+import {Device,Icon} from '../../tool'
 const Item = List.Item;
 const Brief = Item.Brief;
 
@@ -24,7 +25,7 @@ class Mine extends Component {
                 cache: 'force-cache'
             }
         }else{
-            source = require('../../../assets/icon.png')
+            source = Icon.icon
         }
         
         return (
@@ -34,23 +35,23 @@ class Mine extends Component {
                         style={styles.headItem}
                         onClick={()=>{this.push('Infomation')}}
                         thumb={
-                            <View style={{width:50,height:50,marginRight:12,borderRadius:5,overflow:'hidden'}}>
+                            <View style={styles.thumb}>
                                 <Image
                                 source={source}
-                                style={{ width: 50, height: 50 }}
+                                style={styles.info}
                                 />
                             </View>
                         }
                         extra={
                         <Image
-                            source={require('../../../assets/2x/code.png')}
-                            style={{ width: 21, height: 21 }}
+                            source={Icon.Mine.code}
+                            style={styles.code}
                         />
                         }
                         arrow="horizontal"
                     >
                         {username}
-                        <Brief style={{marginTop:4}}>ID:{id}</Brief>
+                        <Brief style={styles.id}>ID:{id}</Brief>
                     </Item>
                 </List>
 
@@ -60,8 +61,10 @@ class Mine extends Component {
                         onClick={()=>{this.push('Setting')}}
                         thumb={
                             <Image
-                             source={require('../../../assets/2x/set.png')}
-                              style={{ width: 21, height: 21,marginRight:9 }}
+                             source={Icon.Mine.set}
+                              style={
+                                  styles.icon
+                              }
                             
                             />
                         }
@@ -78,13 +81,30 @@ class Mine extends Component {
 const styles = StyleSheet.create({
 
     head:{
-      height:80,
-      marginBottom:10,
+      height:Device.scale(80),
+      marginBottom:Device.scale(10),
       backgroundColor: '#fff',
     },
     headItem:{
-      height:80,
-    }
+      height:Device.scale(80),
+    },
+    thumb:{
+        width:Device.scale(50),
+        height:Device.scale(50),
+        marginRight:Device.scale(12),
+        borderRadius:Device.scale(5),
+        overflow:'hidden'
+    },
+    info:{
+        width: Device.scale(50),
+        height: Device.scale(50) 
+    },
+    code:{
+         width: Device.scale(21), 
+         height: Device.scale(21) 
+    },
+    id:{marginTop:Device.scale(4)},
+    icon:{ width: Device.scale(21), height: Device.scale(21),marginRight:9 }
   });
 
 const mapStateToProps = ({UserAction} )=> {