React-Native Android
既拥有Native的用户体验、又保留React的开发效率。
尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:
① Native的原生控件有更好的体验;
② Native有更好的手势识别;
③ Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。
④ Native能实现更丰富细腻的动画效果,归根结底是现阶段Native具有更好的人机交互体验
图片来自天猫技术:
天猫技术–关于React-Native
1.环境
React Native只支持在OS X系统, React Native开发的app 要求客户端os >= Android 4.1 (API 16) 和>= iOS 7.0
1.1 工具
- Homebrew
- Nodejs
- nvm
- watchman
- flow
1.2 SDK 环境要求
- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Android Support Repository
1.3 Demo Hello World
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
$ react-native run-android
相应的会在目录AwesomeProject/android/app下创建Android Studio工程,AwesomeProject/iOS/AwesomeProject.xcodeproj目录中创建XCode工程
注:不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为
Debug Server
,默认运行在 8081 端口,APP 通 Debug Server 加载 js。
2.概念
2.1 Component组件
React Native 主要是通过 Virtual Dom 来实现显示页面或者页面中的模块。可以通过 React.createClass() 来创建自己的 Dom,在 React 中称之为组件(Component)
1. 创建组件
// Android
var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid } = React;
var App = React.createClass({
render: function() {
return (
<DrawerLayoutAndroid
renderNavigationView={() => <Text>React Native</Text>}>
<ProgressBarAndroid />
</DrawerLayoutAndroid>
);
},
});
// iOS
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {
return (