网站首页 > 知识剖析 正文
在经过前一天Messenger应用平台、Parse物联网开发者工具等惊喜的轰炸,Facebook于今天凌晨在F8开发者大会上正式开源了React Native。不过目前,只有iOS版,Android版还需要再等一段时间,这是最新的用JavaScript语言开发原生App的尝试,其示例代码相当简洁,内置控件也不少。同时还为React Native开发了一款基于Atom的IDE——Nuclide,也已开源。
React Native主要特性如下:
React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native,开发者可以使用UITabBar、UINavigationController等标准的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> ); }, });
JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如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> ); }, });
Facebook在 React Native的主页上详细介绍了React Native的种种功能特性,想要了解更多细节,可直接进入主页查看,而其为React Native搭配的开源IDE Nuclide支持React Native、Web和原生移动开发,基于Atom构建,不过也需要翻墙。
猜你喜欢
- 2025-01-31 000 前言 | 真实场景=>使用 .NET 9 进行 Web 开发
- 2025-01-31 万字长文把 VSCode 打造成 C++ 开发利器,解决你的多重开发需求
- 2025-01-31 高效设计表格 - 用我们的HTML表格生成器轻松搞定
- 2025-01-31 web前端开发教程,最全JavaScript入门讲解
- 2025-01-31 Rust 不适合开发 Web API(rust开发工具选择)
- 2025-01-31 JavaScript 依然是 Web 开发的王者,你认同吗?
- 2025-01-31 最快1天,搭建你的OpenAPI和开放平台
- 2025-01-31 认识下webview-ffi吧,Cangjie也能用js/html/css开发桌面程序了
- 2025-01-31 FastHTML:用Python重新定义Web开发
- 2025-01-31 QQ 用 Electron 重构后,终实现 Linux、macOS、Windows 三端架构统一!
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)