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

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

    57468 人正在学习 去看看 李宁

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"}]
    }
})

这里写图片描述

2019-02-23 16:49:37 baidu_39503346 阅读数 165
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

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 阅读数 50
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁
                     

初步感官

和身边的朋友讨论过这个框架,昨晚好奇下载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

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

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

    57468 人正在学习 去看看 李宁
2019-11-25 20:55:21 qq_41151659 阅读数 17
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

在这里插入图片描述

React Native简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

React Native特性

  • 原生的iOS组件
    React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native,开发者可以使用UITabBar、UINavigationController等标准的iOS平台组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。
  • 异步执行
    JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
  • 触摸处理
    React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如TouchableHighlight等更高级的组件。

React Native架构

先上一副React Native 架构图,这是我在内部培训的时候画的一副图。
在这里插入图片描述

  1. 绿色的是我们应用开发的部分。我们写的代码基本上都是在这一层。
  2. 蓝色代表公用的跨平台的代码和工具引擎,一般我们不会动蓝色部分的代码。
  3. 黄色代码平台相关的代码,做定制化的时候会添加修改代码。不跨平台,要针对平台写不同的代码。iOS写OC, android写java,web写js. 每个bridge都有对应的js文件,js部分是可以共享的,写一份就可以了。如果你想做三端融合,你就得理解这一个东西。如果你要自己定制原生控件,你就得写bridge部分。
  4. 红色部分是系统平台的东西。红色上面有一个虚线,表示所有平台相关的东西都通过bridge隔离开来了。
  5. 大部分情况下我们只用写绿色的部分,少部分情况下会写黄色的部分。你如果对基础架构和开源感兴趣,你可以写蓝色部分,然后尝试给那些大的开源项目提交代码。红色部分是独立于React Native的,不讨论。

React Native详细学习

https://reactnative.cn/docs/getting-started.html

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