React Native | Xamarin | |
---|---|---|
Learning curve | Javascript, React, npm | iOS, Android, C# |
Coding Env. | IntelliJ, Webstorm, IDE or Text editor support JS | Xamarin Studio |
Eco system & community | Facebook, Github | Microsoft, Test cloud, component store |
License & cost | Free | Commercial |
Debugging | Chrome | Xamarin Studio |
Component
Props
var SampleApp = React.createClass({
// you can get the props in component
// you can pass props to another component
// immutable
});
var SampleApp = React.createClass({
getInitialState() {
return {count: 0};
},
incrementCount() {
this.setState({
count: this.state.count + 1
});
},
...
});
var React = require('react');
var SampleApp = React.createClass({
getInitialState() {
return {count: 0};
},
incrementCount() {
this.setState({
count: this.state.count + 1
});
},
render() {
return (
<div>
<h2>My first React app</h2>
<span onClick={this.incrementCount}>
{this.state.count} clicks
</span>
</div>
)
}
});
React.render(<SampleApp />, document.querySelector('body'));
var React = require('react-native');
var {View, Text} = React;
var SampleApp = React.createClass({
getInitialState() {
return {count: 0};
},
incrementCount() {
this.setState({
count: this.state.count + 1
});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>My first React app</Text>
<Text onPress={this.incrementCount}>
{this.state.count} clicks
</Text>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
...
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
View, Text, Image, ScrollView, DatePickerIOS, PickerIOS, ListView,
Navigator, SwitchIOS, MapView, AlertIOS, WebView, Touchable, TabBarIOS, SegmentedControlIOS, ActivityIndicatorIOS, CameraRoll, NetInfo, PanResponder, StatusBarIOS, TextInput, SliderIOS, PushNotificationIOS, LinkingIOS, ActionSheetIOS, AsyncStorage, Geolocation, VibrationIOS, Video, Camera, AudioRecorder, etc..
brew install node
brew install watchman
brew install flow
npm install -g react-native-cli
react-native init SampleApp