React 0.13.0-rc

React 0.13.0-rc

×

测试测试✓
语言语言 Objective-CObjective C
许可证 BSD
发布最近发布2016年5月

由vjeux、Brent Vatne、James Ide、Facebook, Inc.维护。

React 0.13.0-rc

  • 由
  • Facebook
这个库已弃用。

React Native

React Native允许您使用JavaScript和React一致的开发体验在本地平台上构建一流的应用程序体验。React Native的重点是跨所有您关心的平台提高开发者效率 - 一次学习，在任何地方编写。Facebook在多个生产应用程序中使用React Native，并将继续投资React Native。

原生iOS组件

使用React Native，您可以在iOS上使用标准平台组件，例如UITabBar和UINavigationController。这使您的应用程序外观与其他平台生态系统保持一致，并保持高质量的标准。这些组件可以很容易地通过它们的React组件对应物（如TabBarIOS和NavigatorIOS）集成到您的应用程序中。

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

异步执行

JavaScript应用程序代码与本地平台之间的所有操作都是异步执行的，并且原生模块也可以使用额外的线程。这意味着我们可以从主线程解码图片，在后台保存到磁盘，测量文本并计算布局，而不会阻塞UI，等等。因此，React Native应用程序自然会流畅和响应。通信也是完全可序列化的，这允许我们利用Chrome开发者工具在模拟器或真实设备上调试JavaScript，同时运行完整的应用程序。

触摸处理

iOS有一个非常强大的称为响应者链的系统，用于在复杂的视图层次结构中协商触摸，这在Web上没有普遍的类似物。React Native实现了一个类似的响应者系统，并提供了一级组件，如TouchableHighlight，它们可以与滚动视图和其他元素正确集成，而无需任何额外配置。

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和样式

布局视图应该简单方便，这就是为什么我们把Web上的flexbox布局模型带到了React Native。Flexbox使得构建常见的UI布局变得简单，比如带有边距和填充的堆叠和嵌套框。React Native还支持常见的Web样式，如fontWeight，而StyleSheet抽象提供了一个优化的机制来声明所有您的样式和布局，并在使用它们的组件中与他们一起应用并内联应用。

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专注于改变视图代码的编写方式。对于其他所有功能，我们寻求网站上的通用标准，并适当地填充这些API。您可以使用npm安装JavaScript库，这些库可以在React Native内置的功能之上运行，如XMLHttpRequest、window.requestAnimationFrame和navigator.geolocation。我们正在努力扩展可用的API，并期待开源社区也能做出贡献。

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创建一个非常出色的应用程序，而不需要编写任何原生代码，但React Native也旨在通过自定义原生视图和模块轻松扩展 - 这意味着你可以重用你已构建的任何东西，并且可以导入和使用你最喜欢的原生库。要在iOS中创建一个简单的模块，创建一个实现了RCTBridgeModule协议的新类，并将你需要供JavaScript使用的函数包装在RCT_EXPORT_METHOD中。此外，类本身必须使用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({
  getInitialState() {
    return { text: 'Goodbye World.' };
  },
  componentDidMount() {
    NativeModules.MyCustomModule.processString(this.state.text, (text) => {
      this.setState({text});
    });
  },
  render: function() {
    return (
      <Text>{this.state.text}</Text>
    );
  },
});

可以通过扩展RCTViewManager来暴露自定义iOS视图，实现一个-view方法，并使用RCT_EXPORT_VIEW_PROPERTY宏导出属性。然后你可以在你的应用程序中使用JavaScript中的requireNativeComponent来使用该组件。

// Objective-C

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

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

运行示例

  • git clone https://github.com/facebook/react-native.git
  • cd react-native && npm install
  • cd Examples

现在打开任何示例，并在Xcode中点击运行。

有关更多文档、教程等信息，请访问React Native网站。