iOS原生 和 react native视图混编
2017-12-08 18:29
429 查看
在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编.
关键点只有二:
1.通过 RCTRootView 加载RN视图.
2.RN中,只需要AppRegistry.registerComponent()导出即可.
关键代码:
OC里面:
View Code
效果如图:
github: https://github.com/pheromone/IOS-native-and-React-native-interaction 中的 iOSRN
关键点只有二:
1.通过 RCTRootView 加载RN视图.
2.RN中,只需要AppRegistry.registerComponent()导出即可.
关键代码:
OC里面:
import React, { Component } from 'react'; import { AppRegistry, Platform, StyleSheet, Text, View } from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <Text> 我是RN </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('iosrn', () => App);
View Code
效果如图:
github: https://github.com/pheromone/IOS-native-and-React-native-interaction 中的 iOSRN
相关文章推荐
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- React Native之创建iOS视图
- ReactNative之原生模块开发并发布--iOS篇
- React-Native 原生模块(iOS)调用
- 关于iOS原生和react-native的交互
- iOS原生和React-Native之间的交互2
- iOS原生项目中集成React Native
- 【react-native-0.31-iOS】封装原生组件并调用(02)
- React Native移植到原生iOS平台项目
- React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块
- React native 自定义弹窗(android使用原生ios弹窗)
- iOS在原生项目中插入React Native(最终版)
- 最新iOS原生项目集成React-Native
- ios原生项目集成react-native过程记录
- React-Native踩坑之路:react-native原生组件封装(iOS)
- ios 原生应用和React native 结合开发1.环境搭建
- 【React Native开发】React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)
- iOS 原生模块 给 Javascript(ReactNative) 发送事件 (通知监听)
- React Native 与原生之间的通信(iOS)
- React Native和iOS原生方法交互