React Native簡介

原文地址
這是翻譯，刪減的的reac native的官方簡介机杜，翻譯完之后椒拗，還是挺失望的蚀苛，槽點(diǎn)在于堵未，你需要學(xué)習(xí)更多東西。同時(shí)舞動js和oc兩種語言拙徽，腳踏web和native兩套庫诗宣，才能從容應(yīng)對開發(fā)中的挑戰(zhàn)。臉書此舉篮灼，不過是給web開發(fā)者向移動進(jìn)軍提供了橋梁，對于移動開發(fā)者娘荡，可有可無争群，未必有很大吸引力玉雾。

• React Native - 使用REACT開發(fā)世界一流的原生應(yīng)用.
• 使用JavaScript和React.
• React Native專注于夸平臺的開發(fā)效率. 一次學(xué)習(xí), 夸平臺應(yīng)用.

開始搞React Native

原生 iOS 組件

可以直接使用iOS的原生組件, 這樣界面就會和平臺上得應(yīng)用們一致了.

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>
    );
  },
});

異步執(zhí)行

JavaScript代碼和原生平臺之間的操作都是異步的. 這樣解碼圖片, 往磁盤存儲文件, 測量文本大小, 計(jì)算布局等等都可以再后臺運(yùn)行而不阻塞界面. 這樣REACTIVE-NATIVE應(yīng)用運(yùn)行流暢, 響應(yīng)迅速. The communication is also fully serializable, 可以使用Chrome的Web調(diào)試工具進(jìn)行調(diào)試.

觸摸操作

React Native自建了一套響應(yīng)系統(tǒng)代替了iOS的響應(yīng)鏈系統(tǒng).

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>
    );
  },
});

伸縮盒與樣式表

React-Native使用伸縮盒以及樣式進(jìn)行界面的布局和渲染

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 },
});

其他

React Native 聚焦于iOS的界面開發(fā)，其他方面幸冻，使用js等web通用技術(shù).

var React = require(‘react-native’);
var { Text } = React;

var GeoInfo = React.createClass({
  getInitialState: function() {
    return { position: ‘unknown’ };
  },
  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => this.setState({position}),
      (error) => console.error(error)
    );
  },
  render: function() {
    return (
      <Text>
        Position: {JSON.stringify(this.state.position)}
      </Text>
    );
  },
});

擴(kuò)展能力

可以將原生的代碼，導(dǎo)出給js用碑定。

RCT_EXPORT_MODULE();.

// Objective-C

#import “RCTBridgeModule.h”

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule

RCT_EXPORT_MODULE();

// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
  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>
    );
  },
});

Custom iOS views can be exposed by subclassing RCTViewManager, implementing a -(UIView *)view method, and exporting properties with the RCT_EXPORT_VIEW_PROPERTY macro. Then a simple JavaScript file connects the dots.

// Objective-C

#import “RCTViewManager.h”

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

- (UIView *)view
{
  return [[MyCustomView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);
@end
// JavaScript

var React = require(‘react-native’);
var { requireNativeComponent } = React;

class MyCustomView extends React.Component {
  render() {
    return <NativeMyCustomView {…this.props} />;
  }
}
MyCustomView.propTypes = {
  myCustomProperty: React.PropTypes.oneOf([‘a(chǎn)’, ‘b’]),
};

var NativeMyCustomView = requireNativeComponent(‘MyCustomView’, MyCustomView);
module.exports = MyCustomView;