React-Native简介

React-Native 基于目前React来开发IOS原生应用,Android版本将在年底推出。

为什么需要React-Native

目前主流的应用大体分成三类:Native App, Web App, Hybrid App.

Native App

优点

  • 性能好,性能好,还是性能好 缺点
  • 开发成本高,无法跨平台
  • 升级困难
Web App

优点

  • 跨平台,Write Once , Run Anywhere
  • 版本升级容易 缺点
  • 无法系统系统级的API
  • 临时入口,用户留存度低
  • 性能差
Hybrid App

Native App 和 Web App 折中的方案,保留了 Native App 和 Web App 的优点。但是最受吐槽的还是性能差。页面渲染效率低,在Webview中绘制界面,实现动画,资源消耗都比较大。

React-Native

What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.

这是 React-Native 设计的初衷: 既保留流畅的用户体验,有保留React的开发效率

React-Native 做了什么

  • React-Native 丢弃了 Webview。
  • 复用React,将 Dom 结构de改变通过 diff 算法处理后,由 js 传递给 native 进行底层视图布局。
  • css-layout引擎,前端可以继续写熟悉的 css 语法,由引擎转化成 oc 底层的布局。
  • 对 js 暴露底层常用的 UI 组建。js 层可以直接对这些组件进行布局。

对应前端的开发模式的变化:

  • JSX vs Html
  • css-layout vs css
  • ECMAScript 6 vs ECMAScript 5
  • React-Native vs DOM

如何开始

1) 安装以来的包和软件,参考这里。 2) 运行下面的命令,初始化项目:

react-native init helloworld

3) 在项目目录下面,运行:

    npm install
    npm start

4) 使用 Xcode 开发项目,运行,即可看到模拟器中的效果。这里有可能会运行失败报错,主要可以从2方面排查:

  • AppDelegate.m 中 jsCodeLocation 的定义是否正确。
  • 删除 /Users/{you}/Library/Developer/Xcode/DerivedData 文件夹,重启Xcode。 (PS: 官方给的例子好几个都有上面的问题,跑不起来)

5) 修改目录下的 index.ios.js 文件,定制自己的UI。

    render : function() {    
        return (
            <View style={styles.container}>
            <Text>Hello World!</Text>
            </View>

        )
    }

cmd + R 刷新模拟器即可看到效果,就是这么简单。

进阶玩法,自定义UI组件

如下图,实现课程列表的效果(下图是react-native实现效果,原效果猛戳这里,只实现了页面中的listview):

    var CList = React.createClass({
    getInitialState: function(){
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
            dataSource: ds.cloneWithRows(data),
            load: false
        }
    },    
    render: function(){
        return (
            <ListView dataSource={this.state.dataSource} 
            renderRow={this.renderRow} 
            style={styles.courseList} />
        )    
    },
    renderRow: function(course){
        course._price = course.price == 0 ? '免费' : '¥' + (course.price / 100).toFixed(2);
        course._priceCla = {};
        course._priceCla.color = course.price == 0 ? '#5db61b' : '#e85308';
        return(
            <TouchableOpacity>
                <View style={styles.row}>
                    <View style={styles.container}>
                        <Image style={styles.face} source={{uri : course.cover_url + '222'}}/>
                        <View style={styles.right}>
                            <Text style={styles.name} numberOfLines="2">{course.name}</Text>
                            <Text style={styles.agency}>{course.agency_name}</Text>
                            <View style={{flex: 1, flexDirection: 'row'}}>
                            <Text style={[styles.price,course._priceCla]}>                        
                            {course._price}
                            </Text>
                            <Text style={{color: 'gray', flex: 1}}>{course.see_num}人观看</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
});
module.exports = CList;

在入口文件中,require上面的文件,然后在render方法中直接调用改组件即可。

  render: function() {
    return (
        <NavigatorIOS
            style={styles.container}
            initialRoute={{
                title: '课程列表',
                component: CList,
            }} />
    );
  }

总结

小试了一下 React-Native,还是很强大的,期待Android的版本。文章中若有不对,欢迎斧正、交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

【redux】详解react/redux的服务端渲染:页面性能与SEO

亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数...

2457
来自专栏梁源的专栏

基于 vue-cli + webpack 开发实践:《体育视频播放页》

《体育视频播放页》基于vue-cli+webpack开发,此次开发总结,将会总结开发过程中涉及到的知识点以及开发技巧,希望能帮助到想要在工作中使用Vue.js开...

7084
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

883
来自专栏程序猿的那些趣事

这些改成中文名的前端框架,你能认识几个?

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当...

302
来自专栏前端人人

React第三方组件6(状态管理之Mobx的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件6(状态管理之Mobx的使用①简单使...

3105
来自专栏阮一峰的网络日志

React 技术栈系列教程

上周中秋节,我待在家里,写完了 Redux 教程。 至此,《React 技术栈系列教程》算是比较完整了。 ? ES6 语法:教程 Babel:教程 Reac...

3195
来自专栏IT大咖说

大漠穷秋:全面解读Angular 4.0核心特性

摘要 基于最新的Angular4.0版本,超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli,以及Angular最核心的3大概念:组件、模块、路...

3245
来自专栏前端架构

react异步数据如ajax请求应该放在哪个生命周期?

对于同步的状态改变,是可以放在componentWillMount,对于异步的,最好好放在componentDidMount。但如果此时有若干细节需要处理,比如...

912
来自专栏企鹅号快讯

从Npm Script到Webpack,6种常见的前端构建工具对比

小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用...

2326
来自专栏木子墨的前端日常

Vue-Router模式、钩子

上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧

712

扫码关注云+社区