React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗，構(gòu)建世界一流的原生APP。React Native著力于提高多平臺開發(fā)的開發(fā)效率 —— 僅需學(xué)習(xí)一次，編寫任何平臺。(Learn once, write anywhere)Facebook已經(jīng)在多項產(chǎn)品中使用了React Native，并且將持續(xù)地投入建設(shè)React Native。開始使用React Native原生組件#使用React Native，你可以使用標(biāo)準(zhǔn)的平臺組件，例如iOS的UITabBar或安卓的Drawer。 這使你的app獲得平臺一致的視覺效果和體驗，并且獲得最佳的性能和流暢性。 使用對應(yīng)的React component，就可以輕松地把這些原生組件整合到你的React Native應(yīng)用中， 例如TabBarIOS和DrawerLayoutAndroid。// iOSimport React, {? Component,} from 'react';import {? TabBarIOS,? NavigatorIOS } from 'react-native';class App extends Component {? render() {? ? return ();? }}// Androidimport React, {? Component,} from 'react';import {? DrawerLayoutAndroid,? ProgressBarAndroid,? Text } from 'react-native';class App extends Component {? render() {? ? return (React Native}>);? }}異步執(zhí)行#在Javascript代碼和原生平臺之間的所有操作都是異步執(zhí)行的，并且原生模塊還可以根據(jù)需要創(chuàng)建新的線程。這意味著你可以在主線程解碼圖片，然后在后臺將它保存到磁盤，或者在不阻塞UI的情況下計算文字大小和界面布局等等。所以React Native開發(fā)的app天然具備流暢和反應(yīng)靈敏的優(yōu)勢。Javascript和原生代碼之間的通訊是完全可序列化的，這使得我們可以借助Chrome開發(fā)者工具去調(diào)試應(yīng)用，而不論應(yīng)用運(yùn)行在模擬器還是真機(jī)上。參見調(diào)試觸摸事件處理#React Native實現(xiàn)了一個強(qiáng)大的觸摸事件處理系統(tǒng)，可以在復(fù)雜的View層次關(guān)系下正確地處理觸摸事件。同時還提供了高度封裝的組件如TouchableHighlight等，可以直接嵌入到ScrollView或者其它的元素中，無需額外配置。// iOS & Androidimport React, {? Component,} from 'react';import {? ScrollView,? TouchableHighlight,? Text} from 'react-native';class TouchDemo extends Component {? render() {? ? return (console.log('pressed')}>Proper Touch Handling);? }}彈性盒(Flexbox)和樣式#控制view的布局應(yīng)當(dāng)簡單易行，這就是為什么React Native從web中借鑒了Flexbox模型。Flexbox讓大多數(shù)常見的UI布局構(gòu)建變得簡單（譬如帶有外襯margin和內(nèi)襯padding，且堆疊在一起的多個矩形）。React Native還支持多種常見的web樣式，例如fontWeight等。抽象樣式表提供了一個高性能的機(jī)制來聲明所有的樣式和布局，并且可以直接應(yīng)用到你的組件中。// iOS & Androidimport React, {? Component,} from 'react';import {? Image,? StyleSheet,? Text,? View } from 'react-native';class ReactNative extends Component {? render() {? ? return (

React NativeBuild high quality mobile apps using React);? }}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 },});兼容通用標(biāo)準(zhǔn)#React Native致力于改進(jìn)視圖代碼的編寫方式。除此之外，我們還吸納了web生態(tài)系統(tǒng)中的通用標(biāo)準(zhǔn)，并在必要的時候為這些API提供兼容層。如此一來，npm上的許多庫就可以在React Native中直接使用。這樣的兼容層有XMLHttpRequest, window.requestAnimationFrame, navigator.geolocation等。我們還在努力增加更多的API，并且十分歡迎開源社區(qū)進(jìn)行貢獻(xiàn)。// iOS & Androidimport React, {? Component,} from 'react';import {? Text } from 'react-native';class GeoInfo extends Component {? constructor(props) {? ? super(props);? ? this.state = { position: 'unknown' };? },? componentDidMount() {? ? navigator.geolocation.getCurrentPosition(? ? ? (position) => this.setState({position}),? ? ? (error) => console.error(error)? ? );? }? render() {? ? return (Position: {JSON.stringify(this.state.position)});? }}擴(kuò)展性#使用React Native，無需編寫一行原生代碼即可創(chuàng)造一款不錯的app。盡管如此，使用自定義的原生視圖和模塊來擴(kuò)展React Native也非常容易 —— 這意味著你現(xiàn)有的所有工作都可以被復(fù)用，你喜歡的各種原生庫都可以被導(dǎo)入。創(chuàng)建iOS模塊#想要創(chuàng)建一個iOS模塊，只需要創(chuàng)建一個接口，實現(xiàn)RCTBridgeModule協(xié)議，然后把你想在Javascript中使用的任何方法用RCT_EXPORT_METHOD包裝。最后，再用RCT_EXPORT_MODULE導(dǎo)出整個模塊即可。// Objective-C#import "RCTBridgeModule.h"@interface MyCustomModule : NSObject@end@implementation MyCustomModuleRCT_EXPORT_MODULE();// Available as NativeModules.MyCustomModule.processStringRCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback){? callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);}@end// JavaScriptimport React, {? Component,} from 'react';import {? NativeModules,? Text} from 'react-native';class Message extends Component {? constructor(props) {? ? super(props);? ? this.state = { text: 'Goodbye World.' };? }? componentDidMount() {? ? NativeModules.MyCustomModule.processString(this.state.text, (text) => {? ? ? this.setState({text});? ? });? }? render() {? ? return ({this.state.text});? }}創(chuàng)建iOS View#若想自定義iOS View，可以這樣來做：首先繼承RCTViewManager類，然后實現(xiàn)一個-(UIView *)view方法，并且使用RCT_EXPORT_VIEW_PROPERTY宏導(dǎo)出屬性。最后用一個Javascript文件連接并進(jìn)行包裝。// Objective-C#import "RCTViewManager.h"@interface MyCustomViewManager : RCTViewManager@end@implementation MyCustomViewManagerRCT_EXPORT_MODULE()- (UIView *)view{? return [[MyCustomView alloc] init];}RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);@end// JavaScriptimport React, {? Component,? requireNativeComponent} from 'react-native';var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);export default class MyCustomView extends Component {? static propTypes = {? ? myCustomProperty: React.PropTypes.oneOf(['a', 'b']),? };? render() {? ? return;? }}創(chuàng)建Android模塊#同樣的，Android也支持自定義擴(kuò)展。僅僅是方法略有差異。創(chuàng)建一個基礎(chǔ)的安卓模塊，需要先創(chuàng)建一個繼承自ReactContentBaseJavaModule的類，然后使用@ReactMethod標(biāo)注(Annotation)來標(biāo)記那些你希望通過Javascript來訪問的方法。最后，需要在ReactPackage中注冊這個模塊。// Javapublic class MyCustomModule extends ReactContextBaseJavaModule {// Available as NativeModules.MyCustomModule.processString? @ReactMethod? public void processString(String input, Callback callback) {? ? callback.invoke(input.replace("Goodbye", "Hello"));? }}// JavaScriptimport React, {? Component,} from 'react';import {? NativeModules,? Text} from 'react-native';class Message extends Component {? constructor(props) {? ? super(props);? ? this.state = { text: 'Goodbye World.' };? },? componentDidMount() {? ? NativeModules.MyCustomModule.processString(this.state.text, (text) => {? ? ? this.setState({text});? ? });? }? render() {? ? return ({this.state.text});? }}創(chuàng)建Android View#創(chuàng)建自定義的Android View，首先定義一個繼承自SimpleViewManager的類，并實現(xiàn)createViewInstance和getName方法，然后使用@ReactProp標(biāo)注導(dǎo)出屬性，最后用一個Javascript文件連接并進(jìn)行包裝。// Javapublic class MyCustomViewManager extends SimpleViewManager{? @Override? public String getName() {? ? return "MyCustomView";? }? @Override? protected MyCustomView createViewInstance(ThemedReactContext reactContext) {? ? return new MyCustomView(reactContext);? }? @ReactProp(name = "myCustomProperty")? public void setMyCustomProperty(MyCustomView view, String value) {? ? view.setMyCustomProperty(value);? }}// JavaScriptimport React, {? Component,? requireNativeComponent } from 'react-native';var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);export default class MyCustomView extends Component {? static propTypes = {? ? myCustomProperty: React.PropTypes.oneOf(['a', 'b']),? };? render() {? ? return;? }}

開始使用React Native

react-text: 147 友情鏈接： /react-text Node.js中文網(wǎng)前端社區(qū)更多

react-text: 147 友情鏈接： /react-text Node.js中文網(wǎng)前端社區(qū)更多