From a9203c7fa3662465854bd40f74010e4aaa5d71c3 Mon Sep 17 00:00:00 2001 From: xwenliang Date: Mon, 23 May 2016 17:41:02 +0800 Subject: [PATCH] support react-native@0.26 --- README.md | 4 +- example/PickerTest/.buckconfig | 6 + example/PickerTest/.flowconfig | 36 ++++- example/PickerTest/android/app/BUCK | 66 ++++++++ example/PickerTest/android/app/build.gradle | 11 +- .../PickerTest/android/app/proguard-rules.pro | 4 - example/PickerTest/android/app/react.gradle | 97 ----------- .../android/app/src/main/AndroidManifest.xml | 9 +- example/PickerTest/android/keystores/BUCK | 8 + .../keystores/debug.keystore.properties | 4 + example/PickerTest/index.android.js | 150 +++++++++--------- example/PickerTest/index.ios.js | 150 +++++++++--------- .../ios/PickerTest.xcodeproj/project.pbxproj | 18 +-- .../ios/PickerTestTests/PickerTestTests.m | 2 +- example/PickerTest/package.json | 6 +- index.js | 5 +- package.json | 4 +- 17 files changed, 306 insertions(+), 274 deletions(-) create mode 100644 example/PickerTest/.buckconfig create mode 100644 example/PickerTest/android/app/BUCK delete mode 100644 example/PickerTest/android/app/react.gradle create mode 100644 example/PickerTest/android/keystores/BUCK create mode 100644 example/PickerTest/android/keystores/debug.keystore.properties diff --git a/README.md b/README.md index c28386a..e2f22c8 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,9 @@ A Picker written in pure javascript for cross-platform support. It was most likely an example of how to build a cross-platform Picker Component use [react-native-picker-android](https://github.com/beefe/react-native-picker-android). -Needs react-native >= 0.14.2 +###Warn +if 0.14.2 <= react-native <=0.24 `npm install react-native-picker@2.0.5 --save` +if 0.24 < react-native `npm install react-native-picker --save` ####Demo diff --git a/example/PickerTest/.buckconfig b/example/PickerTest/.buckconfig new file mode 100644 index 0000000..934256c --- /dev/null +++ b/example/PickerTest/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/example/PickerTest/.flowconfig b/example/PickerTest/.flowconfig index fd62e40..8e838d9 100644 --- a/example/PickerTest/.flowconfig +++ b/example/PickerTest/.flowconfig @@ -15,8 +15,6 @@ # 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/fetch.js -.*/node_modules/fbjs/lib/ExecutionEnvironment.js .*/node_modules/fbjs/lib/ErrorUtils.js # Flow has a built-in definition for the 'react' module which we prefer to use @@ -42,10 +40,36 @@ # Ignore Website .*/website/.* +# Ignore generators +.*/local-cli/generator.* + +# Ignore BUCK generated folders +.*\.buckd/ + +.*/node_modules/is-my-json-valid/test/.*\.json +.*/node_modules/iconv-lite/encodings/tables/.*\.json +.*/node_modules/y18n/test/.*\.json +.*/node_modules/spdx-license-ids/spdx-license-ids.json +.*/node_modules/spdx-exceptions/index.json +.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json +.*/node_modules/resolve/lib/core.json +.*/node_modules/jsonparse/samplejson/.*\.json +.*/node_modules/json5/test/.*\.json +.*/node_modules/ua-parser-js/test/.*\.json +.*/node_modules/builtin-modules/builtin-modules.json +.*/node_modules/binary-extensions/binary-extensions.json +.*/node_modules/url-regex/tlds.json +.*/node_modules/joi/.*\.json +.*/node_modules/isemail/.*\.json +.*/node_modules/tr46/.*\.json + + [include] [libs] node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow +flow/ [options] module.system=haste @@ -56,15 +80,15 @@ esproposal.class_instance_fields=enable munge_underscores=true module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' -module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub' +module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' suppress_type=$FlowIssue suppress_type=$FlowFixMe suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy [version] -0.21.0 +0.24.0 diff --git a/example/PickerTest/android/app/BUCK b/example/PickerTest/android/app/BUCK new file mode 100644 index 0000000..5719fa8 --- /dev/null +++ b/example/PickerTest/android/app/BUCK @@ -0,0 +1,66 @@ +import re + +# To learn about Buck see [Docs](https://buckbuild.com/). +# To run your application with Buck: +# - install Buck +# - `npm start` - to start the packager +# - `cd android` +# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US` +# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck +# - `buck install -r android/app` - compile, install and run application +# + +lib_deps = [] +for jarfile in glob(['libs/*.jar']): + name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) + lib_deps.append(':' + name) + prebuilt_jar( + name = name, + binary_jar = jarfile, + ) + +for aarfile in glob(['libs/*.aar']): + name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) + lib_deps.append(':' + name) + android_prebuilt_aar( + name = name, + aar = aarfile, + ) + +android_library( + name = 'all-libs', + exported_deps = lib_deps +) + +android_library( + name = 'app-code', + srcs = glob([ + 'src/main/java/**/*.java', + ]), + deps = [ + ':all-libs', + ':build_config', + ':res', + ], +) + +android_build_config( + name = 'build_config', + package = 'com.pickertest', +) + +android_resource( + name = 'res', + res = 'src/main/res', + package = 'com.pickertest', +) + +android_binary( + name = 'app', + package_type = 'debug', + manifest = 'src/main/AndroidManifest.xml', + keystore = '//android/keystores:debug', + deps = [ + ':app-code', + ], +) diff --git a/example/PickerTest/android/app/build.gradle b/example/PickerTest/android/app/build.gradle index 7123653..ce195b6 100644 --- a/example/PickerTest/android/app/build.gradle +++ b/example/PickerTest/android/app/build.gradle @@ -9,7 +9,7 @@ import com.android.build.OutputFile * 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. + * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle @@ -59,7 +59,7 @@ import com.android.build.OutputFile * ] */ -apply from: "react.gradle" +apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: @@ -124,3 +124,10 @@ dependencies { compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules } + +// Run this once to be able to run the application with BUCK +// puts all compile dependencies into folder libs for BUCK to use +task copyDownloadableDepsToLibs(type: Copy) { + from configurations.compile + into 'libs' +} diff --git a/example/PickerTest/android/app/proguard-rules.pro b/example/PickerTest/android/app/proguard-rules.pro index 7d72e46..347a13c 100644 --- a/example/PickerTest/android/app/proguard-rules.pro +++ b/example/PickerTest/android/app/proguard-rules.pro @@ -61,7 +61,3 @@ -dontwarn java.nio.file.* -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement -dontwarn okio.** - -# stetho - --dontwarn com.facebook.stetho.** diff --git a/example/PickerTest/android/app/react.gradle b/example/PickerTest/android/app/react.gradle deleted file mode 100644 index 348fb12..0000000 --- a/example/PickerTest/android/app/react.gradle +++ /dev/null @@ -1,97 +0,0 @@ -import org.apache.tools.ant.taskdefs.condition.Os - -def config = project.hasProperty("react") ? project.react : []; - -def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" -def entryFile = config.entryFile ?: "index.android.js" - -// because elvis operator -def elvisFile(thing) { - return thing ? file(thing) : null; -} - -def reactRoot = elvisFile(config.root) ?: file("../../") -def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] - -void runBefore(String dependentTaskName, Task task) { - Task dependentTask = tasks.findByPath(dependentTaskName); - if (dependentTask != null) { - dependentTask.dependsOn task - } -} - -gradle.projectsEvaluated { - // Grab all build types and product flavors - def buildTypes = android.buildTypes.collect { type -> type.name } - def productFlavors = android.productFlavors.collect { flavor -> flavor.name } - - // When no product flavors defined, use empty - if (!productFlavors) productFlavors.add('') - - productFlavors.each { productFlavorName -> - buildTypes.each { buildTypeName -> - // Create variant and target names - def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}" - def targetPath = productFlavorName ? - "${productFlavorName}/${buildTypeName}" : - "${buildTypeName}" - - // React js bundle directories - def jsBundleDirConfigName = "jsBundleDir${targetName}" - def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: - file("$buildDir/intermediates/assets/${targetPath}") - - def resourcesDirConfigName = "resourcesDir${targetName}" - def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: - file("$buildDir/intermediates/res/merged/${targetPath}") - def jsBundleFile = file("$jsBundleDir/$bundleAssetName") - - // Bundle task name for variant - def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" - - def currentBundleTask = tasks.create( - name: bundleJsAndAssetsTaskName, - type: Exec) { - group = "react" - description = "bundle JS and assets for ${targetName}." - - // Create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDir.mkdirs() - resourcesDir.mkdirs() - } - - // Set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDir - outputs.dir resourcesDir - - // Set up the call to the react-native cli - workingDir reactRoot - - // Set up dev mode - def devEnabled = !targetName.toLowerCase().contains("release") - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", - "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir - } else { - commandLine "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", - "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir - } - - enabled config."bundleIn${targetName}" || - config."bundleIn${buildTypeName.capitalize()}" ?: - targetName.toLowerCase().contains("release") - } - - // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process - currentBundleTask.dependsOn("merge${targetName}Resources") - currentBundleTask.dependsOn("merge${targetName}Assets") - - runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask) - runBefore("processX86${targetName}Resources", currentBundleTask) - runBefore("processUniversal${targetName}Resources", currentBundleTask) - runBefore("process${targetName}Resources", currentBundleTask) - } - } -} diff --git a/example/PickerTest/android/app/src/main/AndroidManifest.xml b/example/PickerTest/android/app/src/main/AndroidManifest.xml index 1b6a569..ed8fb3a 100644 --- a/example/PickerTest/android/app/src/main/AndroidManifest.xml +++ b/example/PickerTest/android/app/src/main/AndroidManifest.xml @@ -1,7 +1,14 @@ + package="com.pickertest" + android:versionCode="1" + android:versionName="1.0"> + + + - - Click Me - - this.picker = picker} - style={{height: 260}} - showDuration={300} - showMask={true} - pickerData={createDateData()} - selectedValue={['2015年', '12月', '12日']} - onPickerDone={(pickedValue) => { - console.log(pickedValue); - }} - /> - - ); - } + constructor(props, context) { + super(props, context); + } + + _onPressHandle() { + this.picker.toggle(); + } + + render() { + return ( + + + Click Me + + this.picker = picker} + style={{height: 260}} + showDuration={300} + showMask={true} + pickerData={createDateData()} + selectedValue={['2015年', '12月', '12日']} + onPickerDone={(pickedValue) => { + alert(JSON.stringify(pickedValue)); + console.log(pickedValue); + }} + /> + + ); + } } 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: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, }); AppRegistry.registerComponent('PickerTest', () => PickerTest); diff --git a/example/PickerTest/index.ios.js b/example/PickerTest/index.ios.js index 4eda6cf..29c6041 100644 --- a/example/PickerTest/index.ios.js +++ b/example/PickerTest/index.ios.js @@ -3,90 +3,96 @@ * https://github.com/facebook/react-native */ -import React, { - View, - Text, - TouchableOpacity, - Dimensions, - Component, - StyleSheet, - AppRegistry +import React, {Component} from 'react' +import { + View, + Text, + TouchableOpacity, + Dimensions, + StyleSheet, + AppRegistry } from 'react-native'; import Picker from 'react-native-picker'; function createDateData(){ - let date = {}; - for(let i=1950;i<2050;i++){ - let month = {}; - for(let j = 1;j<13;j++){ - let day = []; - if(j === 2){ - for(let k=1;k<29;k++){ - day.push(k+'日'); - } - } - else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){ - for(let k=1;k<32;k++){ - day.push(k+'日'); - } - } - else{ - for(let k=1;k<31;k++){ - day.push(k+'日'); - } - } - month[j+'月'] = day; - } - date[i+'年'] = month; - } - return date; + let date = {}; + for(let i=1950;i<2050;i++){ + let month = {}; + for(let j = 1;j<13;j++){ + let day = []; + if(j === 2){ + for(let k=1;k<29;k++){ + day.push(k+'日'); + } + } + else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){ + for(let k=1;k<32;k++){ + day.push(k+'日'); + } + } + else{ + for(let k=1;k<31;k++){ + day.push(k+'日'); + } + } + month[j+'月'] = day; + } + date[i+'年'] = month; + } + return date; }; class PickerTest extends Component { - _onPressHandle(){ - this.picker.toggle(); - } - render(){ - return ( - - - Click Me - - this.picker = picker} - style={{height: 260}} - showMask={true} - showDuration={300} - pickerData={createDateData()} - selectedValue={['2015年', '12月', '12日']} - onPickerDone={(pickedValue) => { - console.log(pickedValue); - }} - /> - - ); - } + constructor(props, context) { + super(props, context); + } + + _onPressHandle() { + this.picker.toggle(); + } + + render(){ + return ( + + + Click Me + + this.picker = picker} + style={{height: 260}} + showMask={true} + showDuration={300} + pickerData={createDateData()} + selectedValue={['2015年', '12月', '12日']} + onPickerDone={(pickedValue) => { + alert(JSON.stringify(pickedValue)); + console.log(pickedValue); + }} + /> + + ); + } } 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: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, }); AppRegistry.registerComponent('PickerTest', () => PickerTest); diff --git a/example/PickerTest/ios/PickerTest.xcodeproj/project.pbxproj b/example/PickerTest/ios/PickerTest.xcodeproj/project.pbxproj index ef9314b..bdef40d 100644 --- a/example/PickerTest/ios/PickerTest.xcodeproj/project.pbxproj +++ b/example/PickerTest/ios/PickerTest.xcodeproj/project.pbxproj @@ -575,10 +575,6 @@ isa = XCBuildConfiguration; buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; - FRAMEWORK_SEARCH_PATHS = ( - "$(SDKROOT)/Developer/Library/Frameworks", - "$(inherited)", - ); GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", @@ -596,10 +592,6 @@ buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; COPY_PHASE_STRIP = NO; - FRAMEWORK_SEARCH_PATHS = ( - "$(SDKROOT)/Developer/Library/Frameworks", - "$(inherited)", - ); INFOPLIST_FILE = PickerTestTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 8.2; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; @@ -620,7 +612,10 @@ ); INFOPLIST_FILE = "PickerTest/Info.plist"; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = "-ObjC"; + OTHER_LDFLAGS = ( + "-ObjC", + "-lc++", + ); PRODUCT_NAME = PickerTest; }; name = Debug; @@ -636,7 +631,10 @@ ); INFOPLIST_FILE = "PickerTest/Info.plist"; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = "-ObjC"; + OTHER_LDFLAGS = ( + "-ObjC", + "-lc++", + ); PRODUCT_NAME = PickerTest; }; name = Release; diff --git a/example/PickerTest/ios/PickerTestTests/PickerTestTests.m b/example/PickerTest/ios/PickerTestTests/PickerTestTests.m index 4b1e545..f2b1b8c 100644 --- a/example/PickerTest/ios/PickerTestTests/PickerTestTests.m +++ b/example/PickerTest/ios/PickerTestTests/PickerTestTests.m @@ -13,7 +13,7 @@ #import "RCTLog.h" #import "RCTRootView.h" -#define TIMEOUT_SECONDS 240 +#define TIMEOUT_SECONDS 600 #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" @interface PickerTestTests : XCTestCase diff --git a/example/PickerTest/package.json b/example/PickerTest/package.json index 6c80c2b..6986c1d 100644 --- a/example/PickerTest/package.json +++ b/example/PickerTest/package.json @@ -6,8 +6,8 @@ "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { - "react": "^0.14.7", - "react-native": "^0.22.2", - "react-native-picker": "^2.0.4" + "react": "^15.0.2", + "react-native": "^0.26.1", + "react-native-picker": "^2.0.5" } } diff --git a/index.js b/index.js index 6c5d776..f53088c 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,8 @@ 'use strict'; -import React, { - Component, +import React, {Component, PropTypes} from 'react'; +import { StyleSheet, - PropTypes, View, Text, Animated, diff --git a/package.json b/package.json index 47253dd..9f7648c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-picker", - "version": "2.0.5", + "version": "3.0.0", "description": "react-native-picker", "main": "index.js", "scripts": { @@ -19,7 +19,7 @@ "email": "wenliang.web@gmail.com" }, "dependencies": { - "react-native-picker-android": "~0.3.8" + "react-native-picker-android": "~1.0.2" }, "engines": { "node": ">=4" -- 2.26.2