React Native 项目 github 址:
https://github.com/facebook/react-native
React Native 项目官网文档:
http://facebook.github.io/react-native/docs/getting-started.html
开发技巧教程
http://reactnative.cn/docs/0.36/getting-started.html
1 RN 能力简介
1.1 原生组件引用
使用 React Native, 你可以使用标准的平台组件, 例如 iOS 的 UITabBar 或安卓的 Drawer. 这使你的 app 获得平台一致的视觉效果和体验, 并且获得最佳的性能和流畅性.
使用对应的 React component, 就可以轻松地把这些原生组件整合到你的 ReactNative 应用中, 例如 TabBarIOS 和 DrawerLayoutAndroid.
- // iOS
- importReact, {Component,} from 'react';
- import{
- TabBarIOS,
- NavigatorIOS
- } from 'react-native';
- class App extends Component{
- render() {
- return (
- <TabBarIOS>
- <TabBarIOS.Item title="React Native" selected={true}>
- <NavigatorIOS initialRoute={{ title: 'React Native' }} />
- </TabBarIOS.Item>
- </TabBarIOS>
- );
- }
- }
- // Android
- importReact, {
- Component,
- } from 'react';
- import{
- DrawerLayoutAndroid,
- ProgressBarAndroid,
- Text
- } from 'react-native';
- class App extends Component{
- render() {
- return(
- <DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}>
- <ProgressBarAndroid />
- </DrawerLayoutAndroid>
- );
- }
- }
1.2 异步执行
在 Javascript 代码和原生平台之间的所有操作都是异步执行的, 并且原生模块还可以根据需要创建新的线程. 这意味着你可以在主线程解码图片, 然后在后台将它保存到磁盘, 或者在不阻塞 UI 的情况下计算文字大小和界面布局等等. 所以 React Native 开发的 app 天然具备流畅和反应灵敏的优势. Javascript 和原生代码之间的通讯是完全可序列化的, 这使得我们可以借助 Chrome 开发者工具去调试应用, 而不论应用运行在模拟器还是真机上.
参见调试 http://reactnative.cn/docs/debugging.html#content
1.3 触摸事件处理
React Native 实现了一个强大的触摸事件处理系统, 可以在复杂的 View 层次关系下正确地处理触摸事件. 同时还提供了高度封装的组件如 TouchableHighlight 等, 可以直接嵌入到 ScrollView 或者其它的元素中, 无需额外配置.
- // iOS & Android
- importReact, {
- Component,
- } from 'react';
- import{
- ScrollView,
- TouchableHighlight,
- Text
- } from 'react-native';
- class TouchDemo extends Component{
- render() {
- return(
- <ScrollView>
- <TouchableHighlight onPress={() => console.log('pressed')}>
- <Text>Proper Touch Handling</Text>
- </TouchableHighlight>
- </ScrollView>
- );
- }
- }
1.4 弹性盒 (Flexbox) 和样式
控制 view 的布局应当简单易行, 这就是为什么 React Native 从 web 中借鉴了 Flexbox 模型. Flexbox 让大多数常见的 UI 布局构建变得简单(譬如带有外衬 margin 和内衬 padding, 且堆叠在一起的多个矩形).React Native 还支持多种常见的 web 样式, 例如 fontWeight 等. 抽象样式表提供了一个高性能的机制来声明所有的样式和布局, 并且可以直接应用到你的组件中.
- // iOS & Android
- importReact, {
- Component,
- } from 'react';
- import{
- Image,
- StyleSheet,
- Text,
- View
- } from 'react-native';
- class ReactNative extends Component{
- render() {
- 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}>
- ReactNative
- </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 },
- });
1.4.1 Flexbox 属性
- alignItems enum('flex-start', 'flex-end', 'center','stretch')
- alignSelf enum('auto', 'flex-start', 'flex-end','center', 'stretch')
borderBottomWidth 数值型
borderLeftWidth 数值型
borderRightWidth 数值型
borderTopWidth 数值型
borderWidth 数值型
bottom 数值型
flex 数值型
- flexDirection enum('row', 'column')
- flexWrap enum('wrap', 'nowrap')
height 数值型
justifyContent enum('flex-start', 'flex-end', 'center',
'space-between', 'space-around') left 数值型
margin 数值型
marginBottom 数值型
marginHorizontal 数值型
marginLeft 数值型
marginRight 数值型
marginTop 数值型
marginVertical 数值型
padding 数值型
paddingBottom 数值型
paddingHorizontal 数值型
paddingLeft 数值型
paddingRight 数值型
paddingTop 数值型
paddingVertical 数值型
position enum('absolute', 'relative') right 数值型
top 数值型 width 数值型
1.5 兼容通用标准
React Native 致力于改进视图代码的编写方式. 除此之外, 我们还吸纳了 web 生态系统中的通用标准, 并在必要的时候为这些 API 提供兼容层. 如此一来, npm 上的许多库就可以在 React Native 中直接使用. 这样的兼容层有 XMLHttpRequest, window.requestAnimationFrame,navigator.geolocation 等. 我们还在努力增加更多的 API, 并且十分欢迎开源社区进行贡献.
- // iOS & Android
- importReact, {
- 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(
- <Text>
- Position:{JSON.stringify(this.state.position)}
- </Text>
- );
- }
- }
1.6 扩展性
使用 React Native, 无需编写一行原生代码即可创造一款不错的 app. 尽管如此, 使用自定义的原生视图和模块来扩展 ReactNative 也非常容易 -- 这意味着你现有的所有工作都可以被复用, 你喜欢的各种原生库都可以被导入.
1.7 创建 iOS 模块
想要创建一个 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
- importReact, {
- 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(
- <Text>
- {this.state.text}
- </Text>
- );
- }
- }
1.8 创建 iOS View
若想自定义 iOS View, 可以这样来做: 首先继承 RCTViewManager 类, 然后实现一个 -(UIView*)view 方法, 并且使用 RCT_EXPORT_VIEW_PROPERTY 宏导出属性. 最后用一个 Javascript 文件连接并进行包装.
- // 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
- importReact, {
- 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 <NativeMyCustomView {...this.props} />;
- }
- }
1.9 创建 Android 模块
同样的, Android 也支持自定义扩展. 仅仅是方法略有差异.
创建一个基础的安卓模块, 需要先创建一个继承自 ReactContentBaseJavaModule 的类, 然后使用 @ReactMethod 标注 (Annotation) 来标记那些你希望通过 Javascript 来访问的方法. 最后, 需要在 ReactPackage 中注册这个模块.
- // Java
- public class MyCustomModule extends ReactContextBaseJavaModule{
- // Available as NativeModules.MyCustomModule.processString
- @ReactMethod
- public void processString(String input, Callback callback) {
- callback.invoke(input.replace("Goodbye", "Hello"));
- }
- }
- // JavaScript
- importReact, {
- 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(
- <Text> {this.state.text}</Text>
- );
- }
- }
1.10 创建 Android View
创建自定义的 Android View, 首先定义一个继承自 SimpleViewManager 的类, 并实现 createViewInstance 和 getName 方法, 然后使用 @ReactProp 标注导出属性, 最后用一个 Javascript 文件连接并进行包装.
- // Java
- public class MyCustomViewManager extends SimpleViewManager {
- @Override
- public String getName() {
- return "MyCustomView";
- }
- @Override
- protected MyCustomView createViewInstance(ThemedReactContext reactContext) {
- return newMyCustomView(reactContext);
- }
- @ReactProp(name = "myCustomProperty")
- public void setMyCustomProperty(MyCustomView view, String value) {
- view.setMyCustomProperty(value);
- }
- }
- // JavaScript
- importReact, {
- Component,
- requireNativeComponent
- } from 'react-native';
- var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
- export default class MyCustomView extends Component{
- staticpropTypes = {
- myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
- };
- render() {
- return <NativeMyCustomView {...this.props} />;
- }
- }
2 参考链接
React Native 项目 github 址:
https://github.com/facebook/react-native
React Native 项目官网文档:
http://facebook.github.io/react-native/docs/getting-started.html
开发技巧教程
http://reactnative.cn/docs/0.36/getting-started.html
来源: http://www.jianshu.com/p/1fc4af32f899