React Native用 React 編寫移動應(yīng)用
React Native 可以基于目前大熱的開源JavaScript庫React.js來開發(fā)iOS和Android原生App。而且React Native已經(jīng)用于生產(chǎn)環(huán)境——Facebook Groups iOS 應(yīng)用就是基于它開發(fā)的。
React Native的原理是在JavaScript中用React抽象操作系統(tǒng)原生的UI組件，代替DOM元素來渲染，比如以<View>取代<div>，以<Image>替代<img>等。
在幕后，React Native在主線程之外，在另一個(gè)背景線程里運(yùn)行JavaScript引擎，兩個(gè)線程之間通過一批量化的async消息協(xié)議來通信（有一個(gè)專門的React插件）。
UI方面React Native提供跨平臺的類似Flexbox的布局系統(tǒng)，還支持CSS子集?？梢杂肑SX或者普通JavaScript語言，還有CoffeeScript和TypeScript來開發(fā)。有評論說，React的UI層模型要比UIKit好很多。
更好的是，由于基于Web技術(shù)，開發(fā)起來可以像在瀏覽器里那樣隨時(shí)在仿真程序中查看應(yīng)用運(yùn)行情況，刷新一下就行，無需編譯，爽吧。
React Native比起標(biāo)準(zhǔn)Web開發(fā)或原生開發(fā)能夠帶來的三大好處：
-
手勢識別：基于Web技術(shù)（HTML5/JavaScript）構(gòu)建的移動應(yīng)用經(jīng)常被抱怨缺乏及時(shí)響應(yīng)。而基于原生UI的React Native能避免這些問題從而實(shí)現(xiàn)實(shí)時(shí)響應(yīng)。
-
原生組件：使用HTML5/JavaScript實(shí)現(xiàn)的組件比起原生組件總是讓人感覺差一截，而React Native由于采用了原生UI組件自然沒有此問題。
-
樣式和布局：iOS、Android和基于Web的應(yīng)用各自有不同的樣式和布局機(jī)制。React Native通過一個(gè)基于FlexBox的布局引擎在所有移動平臺上實(shí)現(xiàn)了一致的跨平臺樣式和布局方案。
原生 iOS 組件：
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);
},
});
觸摸事件處理：
var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;
var TouchDemo = React.createClass({
render: function() {
return (
<ScrollView>
<TouchableHighlight onPress={() => console.log('pressed')}>
<Text>Proper Touch Handling</Text>
</TouchableHighlight>
</ScrollView>
);
},
});
布局：
var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;
var ReactNative = React.createClass({
render: function() {
return (
<View style={styles.row}>
<Image
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
style={styles.image}
/>
<View style={styles.text}>
<Text style={styles.title}>
React Native
</Text>
<Text style={styles.subtitle}>
Build high quality mobile apps using React
</Text>
</View>
</View>
);
},
});
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
image: { width: 40, height: 40, marginRight: 10 },
text: { flex: 1, justifyContent: 'center'},
title: { fontSize: 11, fontWeight: 'bold' },
subtitle: { fontSize: 10 },
});
擴(kuò)展：
// Objective-C
#import "RCTBridgeModule.h"
@interface MyCustomModule : NSObject <RCTBridgeModule>
@end
@implementation MyCustomModule
- (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript
var React = require('react-native');
var { NativeModules, Text } = React;
var Message = React.createClass({
render: function() {
getInitialState() {
return { text: 'Goodbye World.' };
},
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
return (
<Text>{this.state.text}</Text>
);
},
});