转载

Facebook 基于 MIT 许可证开源 React Native

阿里百川，开启移动应用开发的新篇章

ReactNative 支持使用 React 编写本地代码，支持android ios。

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

扩展：

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

正文到此结束