First Commit

.flowconfig

@@ -0,0 +1,65 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/Promise.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/isEmpty.js
+.*/node_modules/fbjs/lib/crc32.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/node_modules/jest-cli/.*
+
+# Ignore Website
+.*/website/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.20.1

.gitignore

@@ -0,0 +1,34 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log

.watchmanconfig

@@ -0,0 +1 @@
+{}

Header.js

@@ -0,0 +1,83 @@
+/**
+ * Created by yuanguozheng on 16/1/19.
+ */
+'use strict';
+
+import React, {
+    Component,
+    Image,
+    TextInput,
+    View,
+    Platform,
+    StyleSheet
+} from 'react-native';
+
+export default class Header extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <Image source={require('./images/header/header_logo.png')} style={styles.logo}/>
+                <View style={styles.searchBox}>
+                    <Image source={require('./images/header/icon_search.png')} style={styles.searchIcon}/>
+                    <TextInput
+                        keyboardType='web-search'
+                        placeholder='搜索京东商品/店铺'
+                        style={styles.inputText}/>
+                    <Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon}/>
+                </View>
+                <Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon}/>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',   // 水平排布
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 处理iOS状态栏
+        height: Platform.OS === 'ios' ? 68 : 48,   // 处理iOS状态栏
+        backgroundColor: '#d74047',
+        alignItems: 'center'  // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
+    },
+    logo: {
+        height: 24,
+        width: 64,
+        resizeMode: 'stretch'  // 设置拉伸模式
+    },
+    searchBox: {
+        height: 30,
+        flexDirection: 'row',
+        flex: 1,  // 类似于android中的layout_weight,设置为1即自动拉伸填充
+        borderRadius: 5,  // 设置圆角边
+        backgroundColor: 'white',
+        alignItems: 'center',
+        marginLeft: 8,
+        marginRight: 12
+    },
+    scanIcon: {
+        height: 26.7,
+        width: 26.7,
+        resizeMode: 'stretch'
+    },
+    searchIcon: {
+        marginLeft: 6,
+        marginRight: 6,
+        width: 16.7,
+        height: 16.7,
+        resizeMode: 'stretch'
+    },
+    voiceIcon: {
+        marginLeft: 5,
+        marginRight: 8,
+        width: 15,
+        height: 20,
+        resizeMode: 'stretch'
+    },
+    inputText: {
+        flex: 1,
+        backgroundColor: 'transparent',
+        fontSize: 14
+    }
+});

MainScreen.js

@@ -0,0 +1,22 @@
+/**
+ * Created by yuanguozheng on 16/1/19.
+ */
+'use strict';
+
+import React, {
+    Component,
+    StyleSheet,
+    View
+} from 'react-native';
+
+import Header from './Header';
+
+export default class MainScreen extends Component {
+    render() {
+        return (
+            <View style={{flex:1}}>
+                <Header />
+            </View>
+        );
+    }
+}

README.md

@@ -1,2 +1,6 @@
 # JdApp
 基于React Native构建的仿京东客户端
+
+博客地址: http://blog.csdn.net/yuanguozhengjust
+
+此项目为博文演示DEMO, 欢迎批评指正!

android/app/build.gradle

@@ -0,0 +1,117 @@
+apply plugin: "com.android.application"
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets.
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"]
+ * ]
+ */
+
+apply from: "react.gradle"
+
+/**
+ * Set this to true to create three separate APKs instead of one:
+ *   - A universal APK that works on all devices
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.jdapp"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    splits {
+        abi {
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk true
+            reset()
+            include "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ["armeabi-v7a":1, "x86":2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: "libs", include: ["*.jar"])
+    compile "com.android.support:appcompat-v7:23.0.1"
+    compile "com.facebook.react:react-native:0.18.+"
+}