React Native

React-Native 帮助在原生平台打造世界一流的应用体验，使用基于JavaSript和React的结合的开发经验。React-Native的宗旨是更有效的开发全平台的应用。

Native Components

在React-Native你能使用标准平台组件如：iOS的UITabBar以及Android的Drawer。这个给了你APP标准统一的外观，使用这个平台的生态系统，去保持高质量。这些组件能轻易的嵌入到你的APP中使用，和React组件是差不多的，例如:TabBariOS和DrawerLayoutAndroid 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 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= />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Android

var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid, Text } = React;

var App = React.createClass({
  render: function() {
    return (
      <DrawerLayoutAndroid
        renderNavigationView={() => <Text>React Native</Text>}>
        <ProgressBarAndroid />
      </DrawerLayoutAndroid>
    );
  },
});

异步执行

所有的Javascript应用程序代码以及原生平台的操作都是异步的，并且原生模块也能够使用额外的线程。这意味着我们能关闭主线程的图像解码，后台把图片保存到磁盘，渲染文字和计算布局而不会阻塞UI。这样一来，React-Native应用自然流畅性和响应。通信也完全序列化，这使我们能够充分利用Chrome开发者工具来调试Javascript的运行时完整的应用程序，无论是模拟器还是真实设备。

触摸处理

React-Native实现了一个功能强大的系统解决触摸在复杂的视图层次中，并且提供高层级的组件，例如：TouchableHighlight和滚动视图和其他元素融合在一起，不需要额外的配置。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// iOS & Android

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

Flexbox和样式

视图布局应该很容易，这就是为什么我们把Flexbox的布局模型从web带到了React-Native。Flexbox让构建大部分公共部分的UI布局更简单，例如用margin和padding堆叠和嵌套的Box。React-Native也支持公共的网页样式，如：fontWeight和StyleSheet抽象提供了一个优化的机制来声明所有的样式和布局正确一起使用它们和内联应用它们的组件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// iOS & Android

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source=
          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集中于改变视图代码编写的方式，至于剩下的，我们期待在网络的普遍标准和在恰当情况下填充那些API。你能使用npm安装JavaSript库拷贝到React-Native运行。如:XMLHttpRequest,window.requestAnimationFrame,navigator.geolocation。我们努力扩展可用的API，并且很高兴为开源贡献力量。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// iOS (Android support for geolocation coming)

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

可扩展性

React-Native可用来开发一个伟大的APP而不用写一行原生代码，但是React-Native的设计也与自定义原生的视图和模块的扩展，这意味着你开源复用任何你之前已经构建过的，也能导入使用你喜欢的原生库。

创建iOS模块

创建一个简单的iOS模块，创建一个新的类来实现RCTBridgeModule协议,包含函数实现JavaSript在RCT_EXPORT_METHOD的功能。额外，这个类自身必须明确的导出RCT_EXPORT_MODULE();。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  getInitialState() {
    return { text: 'Goodbye World.' };
  },
  componentDidMount() {
    NativeModules.MyCustomModule.processString(this.state.text, (text) => {
      this.setState({text});
    });
  },
  render: function() {
    return (
      <Text>{this.state.text}</Text>
    );
  }
});

创建iOS视图

自定义的iOS视图能被导出，继承于RCTViewManager,实现-(UIView*)view方法，并且导出属性通过RCT_EXPORT_VIEW_PROPERTY这个宏。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#import "RCTViewManager.h"

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

RCT_EXPORT_MODULE()

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

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

创建安卓模块

同样，安卓也支持自定义扩展，这些方法只是略有不同。

要在Android的一个简单的模块，创建一个扩展ReactContextBaseJavaModule类的新类和注释，你要提供给JavaScript与@ReactMethod功能。此外，类本身必须的ReactPackage注册您的React-Native程序。 

1
2
3
4
5
6
7
8

public class MyCustomModule extends ReactContextBaseJavaModule {

// Available as NativeModules.MyCustomModule.processString
  @ReactMethod
  public void processString(String input, Callback callback) {
    callback.invoke(input.replace("Goodbye", "Hello"));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var React = require('react-native');
var { NativeModules, Text } = React;
var Message = React.createClass({
  getInitialState() {
    return { text: 'Goodbye World.' };
  },
  componentDidMount() {
    NativeModules.MyCustomModule.processString(this.state.text, (text) => {
      this.setState({text});
    });
  },
  render: function() {
    return (
      <Text>{this.state.text}</Text>
    );
  }
});

创建安卓视图

定制安卓视图能通过SimpleViewManager扩展，实现一个创建视图实例并且返货函数名称的方法，并与@UIProp标记导出属性被暴露。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {

  private static final String REACT_CLASS = "MyCustomView";

  @UIProp(UIProp.Type.STRING)
  public static final String PROP_MY_CUSTOM_PROPERTY = "myCustomProperty";

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  protected MyCustomView createViewInstance(ThemedReactContext reactContext) {
    return new MyCustomView(reactContext);
  }

  @Override
  public void updateView(MyCustomView view, ReactStylesDiffMap props) {
    super.updateView(view, props);

    if (props.hasKey(PROP_MY_CUSTOM_PROPERTY)) {
      view.setMyCustomProperty(props.getString(PROP_MY_CUSTOM_PROPERTY));
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

written by Rick posted at http://ITMonkeyLife.github.io/Blog

React-Native
Comments

Comments