Permalink
Please sign in to comment.
Showing
with
293 additions
and 39 deletions.
- +21 −1 gulpfile.js
- +69 −0 notes.md
- +131 −0 sample/apis.ts
- +1 −1 sample/hello.ts
- +33 −6 sample/kitchensink.android.ts
- +16 −1 sample/todomvc.ts
- +2 −2 sample/widgets.ts
- +16 −3 src/bootstrap.ts
- +4 −25 src/wrapper_impl.ts
22
gulpfile.js
| @@ -0,0 +1,69 @@ | ||
| +### Todo | ||
| +- Http | ||
| +- Router | ||
| +- query selector on nodes | ||
| +- measure & measureLayout on Nodes | ||
| +- Refactor source | ||
| +- Clarify the needed polyfill and remove es6-shim if possible | ||
| +- High-level Components | ||
| +- Mac | ||
| +- iOS | ||
| +- documentation | ||
| +- typings | ||
| +- testability (unit & e2e tests) | ||
| + | ||
| +### APIs | ||
| + | ||
| +Info APIs (see details at https://facebook.github.io/react-native/docs ): | ||
| + Platform -> Object {OS: "android", Version: 22} | ||
| + NetInfo | ||
| + PixelRatio | ||
| + | ||
| +Useful APIs: | ||
| + Alert | ||
| + AsyncStorage | ||
| + BackAndroid | ||
| + Clipboard | ||
| + GeoLocation | ||
| + IntentAndroid | ||
| + ToastAndroid | ||
| + StyleSheet | ||
| + | ||
| + CameraRoll | ||
| + | ||
| + | ||
| +Animation APIs: | ||
| + Animated | ||
| + Dimensions | ||
| + InteractionManager | ||
| + LayoutAnimation | ||
| + | ||
| +iOS APIs: | ||
| + ActionSheetIOS | ||
| + AdSupportIOS | ||
| + AlertIOS | ||
| + AppStateIOS | ||
| + ImagePickerIOS | ||
| + LinkingIOS | ||
| + PushNotificationIOS | ||
| + Settings | ||
| + StatusBarIOS | ||
| + VibrationIOS | ||
| + | ||
| +Low level APIs: | ||
| + NativeMethodsMixin: to be done in Node | ||
| + PanResponder: gestures already done with hammer.js | ||
| + AppRegistry: for renderer only | ||
| + UIManager: for renderer only | ||
| + Dimensions: ??? | ||
| + | ||
| +### Misc | ||
| + | ||
| +At run time: | ||
| +``` | ||
| + NativeModules.UIManager.RCTText.NativeProps = | ||
| + {"opacity":"number","renderToHardwareTextureAndroid":"boolean","numberOfLines":"number","borderBottomWidth":"number","scaleY":"number","position":"String","paddingTop":"number","borderWidth":"number","color":"number","marginLeft":"number","fontFamily":"String","marginHorizontal":"number","fontStyle":"String","paddingBottom":"number","paddingHorizontal":"number","scaleX":"number","onLayout":"boolean","flexWrap":"String","borderTopWidth":"number","borderRightWidth":"number","marginTop":"number","translateX":"number","rotation":"number","accessibilityLiveRegion":"String","alignItems":"String","accessibilityComponentType":"String","paddingVertical":"number","flex":"number","marginBottom":"number","bottom":"number","textAlign":"String","justifyContent":"String","fontWeight":"String","padding":"number","alignSelf":"String","backgroundColor":"number","right":"number","borderLeftWidth":"number","height":"number","left":"number","translateY":"number","paddingRight":"number","lineHeight":"number","flexDirection":"String","importantForAccessibility":"String","marginVertical":"number","fontSize":"number","accessibilityLabel":"String","width":"number","paddingLeft":"number","text":"String","top":"number","margin":"number","decomposedMatrix":"Map","marginRight":"number","testID":"String"} | ||
| +``` | ||
| + | ||
| +Style: | ||
| +`ReactNativeViewAttributes.RCTView` |
131
sample/apis.ts
| @@ -0,0 +1,131 @@ | ||
| +import {Component, ElementRef, NgZone} from 'angular2/core'; | ||
| +import {StyleSheet, Alert, IntentAndroid, ToastAndroid, Clipboard, Platform, PixelRatio, NetInfo} from 'react-native'; | ||
| +import {NativeFeedback} from './common'; | ||
| + | ||
| +@Component({ | ||
| + selector: 'apis-list', | ||
| + host: {flex: '1'}, | ||
| + directives: [NativeFeedback], | ||
| + template: ` | ||
| +<PagerLayout flex="1" justifyContent="center" alignItems="center" selectedPage="0"> | ||
| + <View [style]="styles.container"> | ||
| + <Text [style]="styles.title">Actionable</Text> | ||
| + <View [style]="styles.button" nativeFeedback (tap)="showAlert()"> | ||
| + <Text [style]="styles.buttonText">Alert</Text> | ||
| + </View> | ||
| + <View [style]="styles.button" nativeFeedback (tap)="showToast()"> | ||
| + <Text [style]="styles.buttonText">Toast</Text> | ||
| + </View> | ||
| + <View [style]="styles.button" nativeFeedback (tap)="launchIntent()"> | ||
| + <Text [style]="styles.buttonText">Intent</Text> | ||
| + </View> | ||
| + <View [style]="styles.button" nativeFeedback (tap)="setClipboard()"> | ||
| + <Text [style]="styles.buttonText">Clipboard</Text> | ||
| + </View> | ||
| + <Text>Current clipboard value: {{clipcoardContent}}</Text> | ||
| + </View> | ||
| + <View [style]="styles.container"> | ||
| + <Text [style]="styles.title">Infos</Text> | ||
| + <Text [style]="styles.subtitle">Platform</Text> | ||
| + <Text>{{platform}}</Text> | ||
| + <Text [style]="styles.subtitle">PixelRatio</Text> | ||
| + <Text>{{ratio}}</Text> | ||
| + <Text [style]="styles.subtitle">Geoloation</Text> | ||
| + <Text>{{location}}</Text> | ||
| + <Text [style]="styles.subtitle">NetInfo</Text> | ||
| + <Text>{{connectionType}} connection is {{isConnected ? 'on' : 'off'}} and {{isConnectionExpensive ? 'expensive' : 'not expensive'}}</Text> | ||
| + </View> | ||
| +</PagerLayout> | ||
| +` | ||
| +}) | ||
| +export class APIsList { | ||
| + styles: any; | ||
| + clipcoardContent: string = ''; | ||
| + platform: string = ''; | ||
| + ratio: string = ''; | ||
| + location: string = 'Fetching ...'; | ||
| + connectionType: string = 'Unknown'; | ||
| + isConnectionExpensive: boolean = false; | ||
| + isConnected: boolean = false; | ||
| + constructor(private zone: NgZone) { | ||
| + this.styles = this._getStyles(); | ||
| + this.platform = `OS: ${Platform.OS}, version: ${Platform.Version}`; | ||
| + this.ratio = PixelRatio.get(); | ||
| + Clipboard.getString((content) => this.zone.run(() => this.clipcoardContent = content)); | ||
| + navigator.geolocation.getCurrentPosition( | ||
| + (position) => this.zone.run(() => this.location = JSON.stringify(position)), | ||
| + (error) => alert(error.message), | ||
| + {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} | ||
| + ); | ||
| + NetInfo.fetch().then((reach) => { this.connectionType = reach }); | ||
| + NetInfo.isConnectionExpensive((isConnectionExpensive) => { this.isConnectionExpensive = isConnectionExpensive }); | ||
| + NetInfo.isConnected.fetch().then((isConnected) => { this.isConnected = isConnected }); | ||
| + } | ||
| + | ||
| + showAlert() { | ||
| + Alert.alert( | ||
| + 'Alert Title', | ||
| + 'My Alert Msg', | ||
| + [ | ||
| + {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, | ||
| + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, | ||
| + {text: 'OK', onPress: () => console.log('OK Pressed')}, | ||
| + ] | ||
| + ); | ||
| + } | ||
| + | ||
| + showToast() { | ||
| + ToastAndroid.show('This is a toast with short duration', ToastAndroid.SHORT); | ||
| + } | ||
| + | ||
| + launchIntent() { | ||
| + var url = 'https://www.angular.io'; | ||
| + IntentAndroid.canOpenURL(url, (supported) => { | ||
| + if (!supported) { | ||
| + console.log('Can\'t handle url: ' + url); | ||
| + } else { | ||
| + IntentAndroid.openURL(url); | ||
| + } | ||
| + }); | ||
| + } | ||
| + | ||
| + setClipboard() { | ||
| + var newValue = this.clipcoardContent == 'foo' ? 'bar' : 'foo'; | ||
| + Clipboard.setString(newValue); | ||
| + Clipboard.getString((content) => this.zone.run(() => this.clipcoardContent = content)); | ||
| + } | ||
| + | ||
| + _getStyles() { | ||
| + return StyleSheet.create({ | ||
| + container: { | ||
| + position: "absolute", | ||
| + top: 0, | ||
| + bottom: 0, | ||
| + left: 0, | ||
| + right: 0, | ||
| + backgroundColor: '#F5FCFF' | ||
| + }, | ||
| + title: { | ||
| + fontSize: 20, | ||
| + textAlign: 'center', | ||
| + margin: 10, | ||
| + }, | ||
| + subtitle: { | ||
| + fontSize: 15, | ||
| + textAlign: 'left', | ||
| + color: '#005eb8' | ||
| + }, | ||
| + button: { | ||
| + padding: 10, | ||
| + margin: 20, | ||
| + height: 50, | ||
| + backgroundColor: '#005eb8' | ||
| + }, | ||
| + buttonText: { | ||
| + color: '#FFFFFF', | ||
| + textAlign: 'center', | ||
| + fontSize: 20 | ||
| + } | ||
| + }); | ||
| + } | ||
| +} |
Oops, something went wrong.
0 comments on commit
a289840