2015-11-16 14:44:44 ccboby 阅读数 10087
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

随着移动互联网的兴起,移动端已经成为一款完整产品不可或缺的部分,作为移动端开发的一员,如何高效的开发出一款有体验,易维护的移动端产品,如何轻松的脚踏两条船或者多条船(iOS,android,web),相信对于一名有理想的男人来说,都是一种无法抵抗的诱惑,这里我向大家吐槽一下我一周多的接触感受,抛砖引玉供大家参考。

ionic:

  • 性能上比预期的要好,
  • app包比较大,毕竟crosswalk 不是白加的。
  • 环境搭建比较坑 项目新建以及安装android平台,build插件 都依赖网络下载,网络不好要等哭
  • requirejs模块化,angularjs 学习曲线较高
  • ionic组件很好用 侧滑菜单,tabs组件现成的
  • api调用轻松加愉快。
  • 自己写插件要功底。
  • 很期待ionic + anglarjs 2.0 专门针对移动端的正式上线,不过angular2.0的新语法得弄哭一大波人
  • 其实,ionic 还能做web应用,以后网站也可以自己做!
  • 在线更新app 想不爱你都难。
  • livereload 模式,相当好用

react-native:

  • 环境搭建被坑了两天,
  • 可直接使用node_modules,很爽
  • 官方demo jsx语法很茫然 html js css 全都在一个文件里面。
  • 文件上传下载 网上有插件,但是下载下来一看,功能不完整,没有展示进度信息,怎么办?自己写与原生混编。
  • 依赖facebook的框架,控件接口没有原生的丰富,只提供了一些基本接口,估计还在不停的更新完善。
  • 扩展性不好,需要和原生混编 iOS,android都懂的话那我还不如直接分开开发了,还不用依赖facebook的框架,网上还有一大批开源好用的第三方库在等着我们。

  • react-native自带的调试插件把我惊呆了,很不错,很专业

  • 同样的livereload ,在线更新没研究,应该也支持吧。
  • 非web 非native 夹在中间很难受 !
  • 学习还是要成本的!

native:

  • 布局适配也是体力活。
  • 同时精通android 和 iOS 的是 【真·大牛】 !

更详细的介绍请查看我的blog原文

2017-09-07 10:33:46 u011094768 阅读数 1828
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

react-native react-native-swiper 设置horizontal=false后界面依然横向滑动,
主要是对布局进行了旋转操作

export  default class TestSwiper extends Component {
    render(){
        return (
            <View style={styles.containerStyle}>
                <Swiper
                    showsPagination={false}
                    autoplay
                >
                    <Text style={[{backgroundColor:"#f0f"},styles.pageStyle]}>界面1</Text>
                    <Text style={[{backgroundColor:"#ff0"},styles.pageStyle]}>界面2</Text>
                    <Text style={[{backgroundColor:"#00f"},styles.pageStyle]}>界面3</Text>
                </Swiper>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    containerStyle:{
        backgroundColor:"#000",
        //旋转90度
        transform:[{rotate: "90deg"}],
        height:100,
        width:100,
    },
    pageStyle:{
        height:100,
        width:100,
        //旋转-90度
        transform:[{rotate: "-90deg"}]
    }
})

这里写图片描述

2016-09-07 14:09:01 dongdong230 阅读数 3294
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁
2019-02-23 16:49:37 baidu_39503346 阅读数 172
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

React Native是React在移动端的跨平台方案 ,开启了开发原生App的新方式。学习React Native需要熟悉React。

React Native是基于React设计的。其官网的介绍是使用React构建Native应用框架,它采用的语法也是React。

需要安装软件

Node.js和npm、React Native(react-native-cli)、NVM(Node.js Version Manager,来管理Node.js版本) 

创建项目:

react-native init "project name"

React:提出的是一个新的开发模式和理念,他强调的是“用户界面”。

React三个特点

作为UI(Just the UI):React可以只作为视图(View)在MVC中使用。

虚拟DOM(Virtual DOM):可以很好的优化视图的渲染和刷新,它是React的一个亮点,也是重要的一个特性。、

数据流(Data Flow):React实现了单向的数据流,并且在数据绑定上更加灵活、便捷。

React学习需要的知识

JSX语法知识:JSX的官方解释是其语法类似于XML,而HTML是XML的子集。

ES6相关知识:因为ES6增加了很多语法特性和新功能,使用它可以进行快速的功能开发。

前端基础知识:最基础的要求需要具备基本的前端知识,CSS和JavaScript比较重要。

React Native开发流程

设计阶段:1、需求分析;2、组件规划

开发阶段:1、入口组件;2、功能入口组件;3、功能集合[n](n:可有多个)

打包更新机制:1、代码更新:a、本地存储,b、远程拉取,c、版本管理;2、自动打包

React Native引进原因

为了将开发成本和用户体验做到平衡。它的跨平台特性和使用JavaScript作为开发语言广受欢迎。它不仅可以使用前端开发模式来开发应用,还能调用原生的UI组件和API。它兼顾了开发效率,提高了用户体验。

React Native学习地址

React Native官网:http://facebook.github.io/react-native/

React Native版本发布:http://github.com/facebook/react-native/releases

React Native Github地址:http://github.com/facebook/react-native

疑难问题搜索:https://github.com/facebook/react-native/issues

 

2019-02-20 12:01:48 cfhgcvb 阅读数 52
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁
                     

初步感官

和身边的朋友讨论过这个框架,昨晚好奇下载reactJS 早上一看还有个react-native 忽然感觉到小白了。react-native 构建的基础原来是reactJS 这家伙。
至于好不好,打鸡血也好,激动也好,第三方框架都是存在风险,一旦苹果和android 平台锁死这个开关,第三方框架还是要死路一条。但在构建这个的时候,确实有一些让人感觉新奇的地方-过去H5一直旧病就是性能低下,webView 坑了不少群众,而react-native 似乎改变了一下做法,玩起了原生调用。其实相当于映射一层关系。但实际是如何运作,还是一头雾水。为什么web 发展到现在就只有fb尝试改造过?我还是不敢下定论。js 统治世界的目标又迈进了一步。

第三方框架有好也有不错,一是调试方便,易于更新和维护。要知道苹果审核慢是出名的。只有发明这些转空子的做法去实现。布局框架难用?目前苹果已经开始逐步改善,所以到后期这些框架存在也变得意义不大。一旦停止更新的后果?第三方一旦停止更新带来一些影响。风险权重要衡量。
优点也讲到,跨平台。减少人力成本,易于维护和调试更新react-native  改进调试方面,却是一大进步,我相信今后编程也会朝向这个目标设计。

react-native init 第一次创建也是参考下面的文章,提及到很多信息了。所以参考这两篇就好了。

但唯一不足是 react-native init 这个命令创建真是慢。从老远程下载回来。第一次会很慢,第二次后面相对会快一些。至于为什么,当然是万恶的网络了。

创建的问题

第一个程序创建失败的时候,可以参考如下流程。
在自己的项目里面 

使用 react-native init 命令创建一个名为 myProject  的文件夹,如果重复创建会提示。

当遇到创建失败的情况。 react-native init fail 的情况,
可以使用如下方法,操作如下,进入到myProject 文件夹,在终端敲打 react-native –save 命令,完成后,再一次使用 react-native init myProject 命令。选择覆盖。这样是会会可以出现项目了。

As a temporary fix,

react-native init myProject
cd myProject && npm install react-native –save
cd ..
react-native init myProject
say yes to overwrite the project.

参考一个博客案例来学习写一下,体验的效果非常好,关键是调试的时候,能够快速刷新这个机制确实是很好解决调试UI的问题。但是基于Es6的语法支持类的书写,多少能够封装起来使用非常方便。

这里写图片描述

参考资料

《深入浅出 React Native:使用 JavaScript 构建原生应用》
http://zhuanlan.zhihu.com/FrontendMagazine/19996445

《React Native第一课》
http://html-js.com/article/2783

《react-native init 》
http://github.com.proxy.parle.co/facebook/react-native/issues/3342

《深入浅出ES6(一):ES6是什么》
http://www.infoq.com/cn/articles/es6-in-depth-an-introduction

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

React Native入门

阅读数 20

没有更多推荐了,返回首页