Upload
ingvar-stepanyan
View
490
Download
2
Embed Size (px)
Citation preview
React Native Components (iOS) ActivityIndicatorIOS
DatePickerIOS
Image
ListView
MapView
Navigator
NavigatorIOS
PickerIOS
ScrollView
SliderIOS
SwitchIOS
TabBarIOS
Text
TextInput
TouchableHighlight
TouchableOpacity
TouchableWithoutFeedback
View
WebView
React Native Stylingvar styles = StyleSheet.create({
base: { width: 38, height: 38 },
background: { backgroundColor: '#222222' },
active: { borderWidth: 2, borderColor: '#00ff00' },
});
…
<Text style={styles.base} />
<View style={styles.background} />
WinJS<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Additem',section:'primary',type:'flyout',flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edititem',section:'primary',onclick:Sample.outputCommand}"></button>
</div>
JSX+WinJS<AppBar id="createAppBar" placement="bottom">{
['Add', 'Remove', 'Edit'].map(name => <AppBarCommand
id={'cmd' + name}
label={name}
icon={name.toLowerCase()}
tooltip={name + ' item'}
section="primary"
onclick={Sample.outputCommand}
/>)
</AppBar>
WinJS(function () {
var Robot = WinJS.Class.define(function (name) {
this.name = name;
});
WinJS.Namespace.define("Robotics", { Robot: Robot });
})();
…
<script src="./robot.js"></script>
…
var myRobot = new Robotics.Robot("Sam");
ES6export default class Robot {
constructor(name) {
this.name = name;
}
}
...
import Robot from './robot';
var myRobot = new Robotics.Robot("Sam");