评论删除后,数据将无法恢复

React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。
React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。
在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。
UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。
更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。
React Native比起标准Web开发或原生开发能够带来的三大好处:
-
手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
-
原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。
-
样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。
原生 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> ); }, });
React Native 0.68.1 发布,使用 React 编写原生应用
React Native 0.68.1 现已发布,具体更新内容如下: Changed Android specific 将 React Native Gradle 插件升级到 0.0.6 codegen tasks 不需要 yarn Fixed 通过将 key function 添加到 Shad...

React Native 0.67.2 发布,使用 React 编写原生应用
React Native 0.67.2 现已发布,具体更新内容如下: Fixed 修复错误“mockModal is not a function”(507b05f4c0) Android specific 修复了 ReactRootView 没有附加 insets 时的潜在崩溃。...

React Native 0.65 发布
React Native 0.65 已经发布了,此版本主要亮点包括: Hermes 0.8.1。 react-native-codegen 0.0.7 版现在需要作为 package.json 中的 devDependency。 JCenter 现已弃用且为只读。官方已将 ...

React Native 0.64 发布,iOS 上 Hermes 支持
React Native 0.64 已经发布了,此版本主要亮点包括: 在 iOS 上加入 Hermes 默认情况下启用 Inline Requires React 17 Hermes opt-in on iOS 在此版本中,用户可以使用 Hermes 在 iOS 上进行...

React Native 0.63 发布,告警系统、颜色与交互能力改进
React Native 0.63 已经发布了,此版本主要亮点包括: 默认启用 LogBox <Pressable /> 组件 新增使用系统定义颜色的 API 默认启用 LogBox 社区一直以来反馈错误和警告很难在 React Native 中...

React Native 0.62 发布,默认支持 Flipper,新的暗黑模式
React Native 0.62 发布了,此版本一大亮点是默认支持 Flipper。 Flipper 是用于调试移动应用的开发人员工具,它在 Android 和 iOS 社区中都很流行,Flipper 提供以下功能: Metro Actions:...

React Native 0.61.0 发布,使用 React 编写原生应用
React Native 0.61.0 发布了,这是一个稳定版本,此版本带来的一些主要变化如下: 全新的热加载体验,称为“快速刷新”(Fast refresh)。它是默认开启的,可以在开发人员菜单下访问。敬请期...

React Native 0.60.5 发布,使用 React 编写原生应用
React Native 0.60.5 发布了,这是一个补丁版本,更新内容如下: 新增 为新项目添加了默认的 Prettier 配置 (f4d5e8c by @jpdriver) Android 将 showSoftInputOnFocus 添加到 TextInput (b47...

React Native 0.60.4 发布,修复新 JS 引擎相关问题
React Native 0.60.4 发布了,此版本修复了两个与 Hermes 相关的 bug: 修复未启用 Hermes 时的源映射 生成 assets/ 之外的源映射 Hermes 是 React Native 0.60.2 版本引入的一个小巧轻便的 ...

没有更多内容
加载失败,请刷新页面
本人初学react 打包遇到一些问题
大体使用是TabNavigator 包含 Navigator,这样TabNavigator 的item一直在底部,但现在是登录界面需要隐藏TabNavig...
随着环境问题越来越严重,人们越来越重视低碳环保的生活方式。作为码农的我们自然也应该为环保做出应有的贡献。那么什么是低碳环保,简而言之就是就是低能量、低消耗...

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown...
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,...
由于需要根据服务器的配置生成对应的UI 逻辑是 1、获取服务器配置 2、将配置的list放到第一个picker中 3、监听onValueChange事件更...
有没有人有实际成功的项目经验
工作多年之后,总想试试看自己做产品来销售谋生能不能行,所以就做了自己的应用,看能支持多久。 想在还年轻的时候,体验一下,都说很难,看看到底如何,积累点经验...
米3刷的是5.1系统。react-native run-android 之后把apk装到手机上就结束了。不知道什么原因,是不是系统的原因,怎么破?

没有更多内容
加载失败,请刷新页面
