react-native_react-native-vector-icons - CSDN
  • 完全征服React Native

    2018-10-22 21:38:05
    React Native是Facebook于2015年推出的跨平台开发...本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合
  • 刚刚度过了繁忙的一个月,连续不断的需求让自己有点招架不住了。写的代码质量有些堪忧,又导致不断的修改bug,陷入了恶性循环中了,不过随着最近最后一个需求即将完结,终于抽空写写rn相关的内容了。...

    刚刚度过了繁忙的一个月,连续不断的需求让自己有点招架不住了。写的代码质量有些堪忧,又导致不断的修改bug,陷入了恶性循环中了,不过随着最近最后一个需求即将完结,终于抽空写写rn相关的内容了。这个标题略有写浮夸,主要是为了吸引眼球,也有自己感受的原因。

    一、rn历史简介

    大家都知道rn是facebook开源的一个框架,不过关于rn的历史大家可能不太清楚。facebook在客户端2.0版本的时候,将大部分页面使用web技术实现,当时大概是2011年,android还在2.3版本、ios还在5.0版本。可想而知,结果当然是扑街了,在当时网页在手机上的体验相当的糟糕,用户吐槽声一片,facebook只能迅速的换成原生的实现。不得不说虽然是一次失败的尝试,但是facebook算是混合应用的先驱者和探索者,这也为后来facebook开发rn打下了基础。
    rn的idea是在2013年的一个极客大会上提出的,2014年7月facebook内部开始尝试使用这项技术,到了2015年3月,rn的ios版本正式开源,到了同年9月,rn的android版本也开源了。大概的发展历程如下:
    这里写图片描述
    rn虽然开源了接近了3年的时间了,但依然还没有到达1.0的正式版本,目前到了0.54版本,期待2021年1.0版本上线的时候…….不得不说,rn是历史上第一个没到正式版本,github却有6w+星星的项目,大写的服气。

    二、rn原理简介

    这里写图片描述
    盗了一张别人的android端架构图(侵删),rn的架构分为3层,java/oc层、c++层以及js层。这个结构和app内嵌h5基本一致,同样涉及到js和native通信等,只是将webview层替换为了c++层。

    三、前端上手rn

    1、rn对前端意味着什么

    我个人的理解是rn能帮助前端开发者使用熟悉的方式开发出一款接近原生体验的App,前提是你对react比较熟悉。接近原生体验要从两个方面来说这个问题,一个方面是rn的实现方式就决定了rn开发出的app只能是接近原生的体验,另一方面是前端同学一般对客户端开发不熟悉,在某些需要客户端方面进行支持优化的地方很难去处理。

    2、前端上手难度

    会React开发就能很快上手RN,还可以使用React全家桶哦。rn直接和react开发有很多相似的地方,同时也可以用是redux等react常用的第三方库,上手难度不大。

    3、前端遇到的小问题

    • 元素超过一屏不滚动
      web端的页面天生会滚动,如果元素超过了一屏就会出现滚动条,但是客户端上元素超过一屏是不会滚动的,需要在最外层套上一个能滚动的元素,比如scrollview或则listview等等。
    • ios和android的平台差异
      虽然rn尽量处理了android和ios两端之前的差异,但是还是两端还是有一些不一致的地方,比如有些控件的属性只在某一端能够使用,这个时候我们尽量避免使用这样的属性,采用两端效果能一致的实现方式来处理
    • 长列表的选择
      rn目前已经提供了listview和flatList两种长列表的方式,listview因为性能问题基本被放弃使用了,所以在选择长列表的时候尽量选择flatlist或者其他开源的列表组件。

    四、rn打开的正确方式

    这里写图片描述
    这是看到别人的博客上写的一段话,看了之后挺有感触的,因为自己在写rn的时候也觉得这是一个需要多方合作的一种开发模式。之前了解到携程好像将客户端和前端合并为大前端团队了,客户端和前端的同学一起协作开发。客户端的同学在app容器处理上肯定是最好的选择,但是一般在react开发上面不是很熟悉,前端同学明显在react的开发上比客户端同学更熟悉和了解,但是一般对客户端的开发比较陌生。双方可以完成自己更擅长的部分,同时可以相互学习各自领域的内容,这是一种极好的提升的方式。

    五、存在的问题

    1、不断更新的版本

    这里写图片描述
    这是rn版本的截图,3年时间已经更新了四十几个版本,不同版本之间差距还是挺大的,所以如何做好rn版本管理以及升级是一个非常重要的工作,主要是兼容性问题。

    2、问题排查困难

    这里写图片描述
    这是做rn经常会看到的一张图,大红的背景里提示你出现了错误,虽然说有调试工具可以帮助你定位错误,但是和web开发不同,rn报错有可能是前端爆的错误,也可能是客户端的错误,问题排查起来会比较苦难。

    3、长列表及动画性能不佳

    • 长列表快速滚动时会出现白屏的情况
      长列表快速向上滚动时,列表会出现白屏的情况。这主要是由于滚动时native和js频繁通信,导致客户端渲染不及时所导致的问题。目前还没有特别好的解决办法,有些公司会尽量避免在rn上使用长列表来规避这样的问题,如果列表内容比较简单的话,白屏出现的可能性会比较小。
    • 动画效果出现卡顿(特别是android手机上)
      rn的实现出来的动画会比较卡顿,原因和上一个问题基本相同。可能得解决方法是将动画完全由原生实现,js端直接使用原生动画,这样就可以避免动画卡顿的问题。

    4、首页白屏问题

    打包成Bundle包后一般会有几M,甚至十几M,导致首次渲染时白屏时间很长。
    在最新款的手机上,白屏的时间很短,然而在低版本的android手机上白屏时间缺非常的长。当然首页白屏问题现在已经有很多方案进行处理,比如拆包和预加载,这两种都是比较常见的处理方案了。

    5、优秀的热更新方案

    • 自搭还是第三方?
      一般公司都会选择自己搭建热更新框架,比较很少有公司愿意把这种更新的业务交由其他公司来完成,小公司的话可以尝试使用微软的热更新方案。
    • 如何做好兼容性处理?
      热更新也会导致兼容性问题,比如在之前的bundle包里没有这个功能,或者功能的结构发生变化,导致老版本无法正常使用新版本的内容。可能得解决方案有:
      1、控制版本,不兼容的版本就不进行热更新
      2、对客户端开方的接口进行封装,屏蔽客户端内部的实现
      3、不使用或者尽量少使用热更新方案,将rn作为一个类似原生模块嵌入到app中,每次发布版本才更新一次rn包
    • 傲娇的苹果
      苹果之前封杀过JSPatch等热跟新方案,没准苹果有出台什么规则不允许rn之类的热更新,所以也得做好心理准备。

    到这就写的差不用多了,最近rn的尝试也是挺有意义的,虽然开发流程等并没有太多新的东西,但是对rn开发流程、整体的结构等有了更深入的了解,之后准备再写写有关rn框架相关的东西,更深入的去了解这个框架。目前来说,rn还不是一个比较成熟的框架,在大型项目中的应用还需要更加谨慎的看待,所以最后点题,rn从入门到放弃,期待1.0版本的到来。

    over…

    展开全文
  • 移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性...
  • 从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴。今天把博客汇如下:《React-Native系列》1、初探React-Native《React-Native系列》2、RN与native交互与数据传递《React-Native系列》3、RN与...

    从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴。

    今天把博客汇总如下:

    1. 《React-Native系列》1、初探React-Native
    2. 《React-Native系列》2、RN与native交互与数据传递
    3. 《React-Native系列》3、RN与native交互之Callback、Promise
    4. 《React-Native系列》4、表单界面代码编写
    5. 《React-Native系列》5、RN实现弹出选择界面与动画效果
    6. 《React-Native系列》6、Navigator语法介绍及经典应用
    7. 《React-Native系列》7、bundle文件的加载和维护
    8. 《React-Native系列》8、RN如何打离线包
    9. 《React-Native系列》9、 Networking之fetch
    10. 《React-Native系列》10、 RN组件之Text和TextInput以及注意要点
    11. 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
    12. 《React-Native系列》12、 API模块之PixelRatio和Dimensions
    13. 《React-Native系列》13、 组件封装之Dialog(iOS和Android通用)
    14. 《React-Native系列》14、 RN学习之NodeJS
    15. 《React-Native系列》15、 RN之可触摸组件
    16. 《React-Native系列》16、 RN组件之ListView
    17. 《React-Native系列》17、 RN中this所引起的undefined is not an object错误
    18. 《React-Native系列》18、 RN之定时器Timer
    19. 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
    20. 《React-Native系列》20、 RN数据流之Flux概览
    21. 《React-Native系列》21、 解决RN在Android下不支持gif问题
    22. 《React-Native系列》22、 Flux框架Demo详解
    23. 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
    24. 《React-Native系列》24、 结合Demo学习Redux框架
    25. 《React-Native系列》25、 详解Redux的connect方法
    26. 《React-Native系列》26、 ReactNative实现图片上传功能
    27. 《React-Native系列》27、 Redux的异步数据流
    28. 《React-Native系列》28、 RN之AsyncStorage
    29. 《React-Native系列》29、 RN组件之WebView
    30. 《React-Native系列》30、 RN组件间通信
    31. 《React-Native系列》31、 Fetch发送POST请求的坑与解决方案
    32. 《React-Native系列》32、 基于Fetch封装HTTPUtil工具类
    33. 《React-Native系列》33、 键盘遮挡问题处理
    34. 《React-Native系列》34、 ReactNative的那些坑
    35. 《React-Native系列》35、 RN在Android下支持gif的另一种方案
    36. 《React-Native系列》36、 ReactNative地图组件
    37. 《React-Native系列》37、 ReactNative百度地图开源组件使用
    38. 《React-Native系列》38、 ReactNative混合组件封装
    39. 《React-Native系列》39、 ReactNative之键盘Keyboard
    40. 《React-Native系列》40、 ReactNative之bundle文件瘦身
    41. 《React-Native系列》41、刨根问底Picker组件
    42. 《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView
    43. 《React-Native系列》43、通用容器和导航设计方案
    44. 《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化
    45. 《React-Native系列》45、踩坑记录

    展开全文
  • 本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。 首先当然还是介绍一下react-native这个框架: ...

    本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。


    首先当然还是介绍一下react-native这个框架:

    他是我们大FaceBook公司推出的一款专门用于App的JS框架,号称“Learn once, write anywhere”。本意是想兼容ios和android系统,写一次代码即可在多个平台运行。这个想法可不可行我就先不讨论(其实根本轮不到我这种菜鸟评价啊,光学习已经很吃力了,我可不是变相说明学习曲线陡峭)


    现在讲一讲学习历程,经过我的无数弯路,想学习react-native,还是要有一些前置条件。你要先看ecmascript 6,知道JS新语法,不然看到=>()和.then以及...props你会一脸懵逼,这是什么鬼啊,然后再看看react.js这个框架,知道了组件生存周期,有助于你加深理解,最后看react-native你会有骑单车俯冲下山的美妙。

    下面是一些网站推荐:

    ecmascript 6 :

    http://es6.ruanyifeng.com/ 讲得挺仔细的


    react.js的话先看中文:

    http://www.ruanyifeng.com/blog/2015/03/react.html阮老师的入门到精通

    http://wiki.jikexueyuan.com/project/react/极客学院的翻译

    http://www.ruanyifeng.com/blog/2016/01/flux.html教你理解Flux

    理解的差不多了,还是看看英文文档养成习惯吧

    官方英文:https://facebook.github.io/react/


    react-native中文:

    http://www.lcode.org/react-native/ 这个很好,对着例子敲一遍差不多就入门了

    http://reactnative.cn/docs/0.31/getting-started.html#content中文官网

    官方英文:https://facebook.github.io/react-native/docs/getting-started.html

    另:http://blog.csdn.net/quanqinyang/article/details/52215641

    3分钟让你理解RN的布局方式,短小精悍

    https://js.coach/ RN的插件库


    先这样吧,下次我再来梳理梳理我的知识,希望这有帮助到你们。


    展开全文
  • 写一个用reactnative 的项目 可以...新建一个reactnative项目 ,底部因为有四个tab 选项卡 那么 我使用一个第三方组件react-native-tab-navigator并且新建一个HomePage.js,关于第三方组件可以看下这篇文章 http://blog

    写一个用reactnative 的项目 可以用于查看GitHub最受欢迎与最热项目的App。

    https://github.com/liudao01/ReactNativeProject

    github地址 还在更新中

    项目开始 HomePage.js

    PS 可以先拖动到底部看下效果图

    新建一个reactnative项目 ,

    底部因为有四个tab 选项卡 那么 我使用一个第三方组件react-native-tab-navigator

    并且新建一个HomePage.js,关于第三方组件可以看下这篇文章 http://blog.csdn.net/true100/article/details/68066649

    这里单独说下 npm install react-native-tab-navigator --save 后面这个–save 这个的作用是用户把这个库加入到package.json中去.

    在Homepage.js里面 使用react-native-tab-navigatior

    这是 index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    
    import Homepage from "./js/pages/HomePage";
    export default class testP extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Homepage/>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      }
    });
    
    AppRegistry.registerComponent('testP', () => testP);
    
    

    这是 Hmepage.js

    /**
     * Created by liuml on 2017/9/8.
     */
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';
    import TabNavigator from 'react-native-tab-navigator';
    import TabNavigatorItem from "react-native-tab-navigator/TabNavigatorItem";
    
    export default class Homepage extends Component {
    
        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {selectedTab: 'papular'};
        }
    
    
        render() {
    
            return <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'papular'}
                        title="最热"
                        slectedTitleStyle={{color: '#FFF'}}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require('../../res/images/ic_popular.png')}></Image>}
                        renderSelectedIcon={() =>
                            <Image style={[styles.icon, {tintColor: '#63B8FF'}]}
                                   source={require('../../res/images/ic_popular.png')}/>}
                        onPress={() => this.setState({selectedTab: 'papular'})}>
    
                        <View style={{backgroundColor: '#FF0', flex: 1}}/>
                    </TabNavigator.Item>
    
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'trending'}
                        slectedTitleStyle={{color: '#0F0'}}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require('../../res/images/ic_trending.png')}/>}
                        renderSelectedIcon={() =>
                            <Image style={[styles.icon, {tintColor: '#63B8FF'}]}
                                   source={require('../../res/images/ic_trending.png')}/>}
                        onPress={() => this.setState({selectedTab: 'trending'})}
                        title="趋势">
    
                        <View style={{backgroundColor: '#0F0', flex: 1}}/>
                    </TabNavigator.Item>
    
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'favorite'}
                        slectedTitleStyle={{color: '#0F0'}}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require('../../res/images/ic_favorite.png')}/>}
                        renderSelectedIcon={() =>
                            <Image style={[styles.icon, {tintColor: '#63B8FF'}]}
                                   source={require('../../res/images/ic_favorite.png')}/>}
                        onPress={() => this.setState({selectedTab: 'favorite'})}
                        title="收藏">
    
                        <View style={{backgroundColor: '#0FF', flex: 1}}/>
                    </TabNavigator.Item>
    
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'my'}
                        slectedTitleStyle={{color: '#0F0'}}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require('../../res/images/ic_my.png')}/>}
                        renderSelectedIcon={() =>
                            <Image style={[styles.icon, {tintColor: '#63B8FF'}]}
                                   source={require('../../res/images/ic_my.png')}/>}
                        onPress={() => this.setState({selectedTab: 'my'})}
                        title="我的">
    
                        <View style={{backgroundColor: '#FFF', flex: 1}}/>
                    </TabNavigator.Item>
    
                </TabNavigator>
            </View>
    
        }
    }
    
    const styles = StyleSheet.create({
    
        container: {
            flex: 1
        },
        icon: {
            width: 26,
            height: 26
        }
    
    });
    
    

    解释:

    我这里拿出一个item 出来解释

    renderSelectedIcon 这是选中后的图片
    tintColor 是给图片渲染
    title 就是名字
    我在构造函数中定义了一个变量selectedTab 让他默认是最热

    // 初始状态
    this.state = {selectedTab: ‘papular’};

    然后在item中判断selected={this.state.selectedTab === ‘papular’} 值是否为最热

    通过selected 判断是否选中状态 根据值是否相等

    在onPress 点击事件 里面给他重新设置值

    在每个item 中间可以看到我填充了一个view

    <View style={{backgroundColor: '#FF0', flex: 1}}/>
    
    

    这个就是作为填充的视图

    
            
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'papular'}
                        title="最热"
                        slectedTitleStyle={{color: '#FFF'}}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require('../../res/images/ic_popular.png')}></Image>}
                        renderSelectedIcon={() =>
                            <Image style={[styles.icon, {tintColor: '#63B8FF'}]}
                                   source={require('../../res/images/ic_popular.png')}/>}
                        onPress={() => this.setState({selectedTab: 'papular'})}>
    
                        <View style={{backgroundColor: '#FF0', flex: 1}}/>
                    </TabNavigator.Item>
    

    然后 看下效果图

    image


    最后看下这个第三方库react-native-TabNavigator的item的源码 直接在import哪里点击引入就好(android studio
    怎么点这里就怎么点)

    
    export default class TabNavigatorItem extends React.Component {
      static propTypes = {
        renderIcon: PropTypes.func,
        renderSelectedIcon: PropTypes.func,
        badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        renderBadge: PropTypes.func,
        title: PropTypes.string,
        titleStyle: Text.propTypes.style,
        selectedTitleStyle: Text.propTypes.style,
        tabStyle: ViewPropTypes.style,
        selected: PropTypes.bool,
        onPress: PropTypes.func,
        allowFontScaling: PropTypes.bool,
      };
    
      static defaultProps = {
      };
    
      render() {
        let child = React.Children.only(this.props.children);
        return React.cloneElement(child, {
          style: [child.props.style, this.props.style],
        });
      }
    }
    
    

    可以看到 renderIcon renderSelectedIcon 等等的声明都在这里


    最热页面 PapularPage.js : 以及导航栏 NavigationBar.js

    说下对应关系 homepage 里面包含了最热页面 PapularPage.js 最热页面里面包含了导航栏 NaivgationBar.js

    关于react native 布局 这篇文章很不错错 http://www.jianshu.com/p/688b9108a922

    先写NavigationBar.js

    
    /**
     * Created by liuml on 2017/9/11.
     */
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        StatusBar,
        Platform,
        Image,
        TouchableOpacity
    } from 'react-native';
    
    export default class NavigationBar extends Component {
    
        render() {
            return <View style={styles.container}>
                <View style={styles.container}>
                    <StatusBar hidden={false} barStyle="light-content"/>
                </View>
                {/*顶部导航栏*/}
                <View style={styles.navBar}>
                    <View style={styles.navBar}></View>
                    <View style={styles.titleWrapper}>
                        <Text style={styles.title}>热门</Text>
                    </View>
    
                    <View style={styles.rightBar}>
                        <TouchableOpacity activeOpacity={0.7}>
                            <Image source={require('../../res/images/ic_search_white_48pt.png')}></Image>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.7}>
                            <Image source={require('../../res/images/ic_more_vert_white_48pt.png')}></Image>
                        </TouchableOpacity>
    
                    </View>
                </View>
            </View>
        }
    }
    const styles = StyleSheet.create({
    
        container: {
            backgroundColor: '#63B8FF',
        },
        statusBar: {
            height: Platform.OS === 'ios' ? 20 : 0
        },
        navBar: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
    
        },
        titleWrapper: {
            flexDirection: 'column',
            justifyContent:'center',
            alignItems:'center',
            position:'absolute',
            left:40,
            right:40,
        },
        title: {
            fontSize: 16,
            color: '#FFF'
        },
        rightBar: {
            flexDirection: 'row',
            alignItems: 'center',
            paddingRight:8
        }
    });
    
    
    

    看下效果图

    mark

    分析 从样式分析

    statusBar

    NavigationBar 会包含状态栏,还有顶部导航栏 状态栏用到一个控件 StatusBar (ios用的)

    注意这里ios和android 稍微有点不同了ios StatusBar 有效果 就是显示顶部的状态栏.安卓没效果

    关于状态栏说下 ios 可以使用 android 无效果 所以得区分下 这里我使用了Platfrom 判断是ios 还是android

    navBar

    flexDirection: ‘row’, 让主轴方向是横向

    justifyContent: ‘space-between’, 让主轴排列方式是在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首

    对齐,每行最后一个元素与行尾对齐。( 这里面有个技巧: 因为控件只有三个

    会造成热门文字不在中间, 那么我就在最左边再添加一个view )

    titleWrapper

    flexDirection: ‘column’, 让主轴方向是纵轴

    justifyContent: ‘center’, 主轴排列方式居中

    alignItems: ‘center’, 交叉轴的排列方式也是居中的

    position: 'absolute',
        left: 40,
        right: 40,   
    

    说下为什么这里需要position ,可以尝试下不加position 会造成热门并不在中间.那么就给他使用position 并且微调下

    position enum(‘absolute’,‘relative’)属性设置元素的定位方式,为将要定位的元素定义定位规则。

    absolute 生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

    relative:生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

    title

    没啥说的就是设置了颜色和大小

    navBtn

    也没啥说的 就是给设置了宽高 右边的搜索和更多的图片宽高

    rightBar

    包裹右面两个图片的样式

    flexDirection: ‘row’, 主轴方向横向

    alignItems: ‘center’, 主轴对齐方式居中对齐

    paddingRight: 8 居右8?  我不清楚这个是dp 还是像素
    

    TouchableOpacity(透明度变化)

    TouchableOpacity组件介绍
    该组件封装了响应触摸事件。当点击按下的时候,该组件的透明度会降低。该组件使用过程中

    并不会改变视图的层级关系,而且我们可以非常容易的添加到应用并且不会产生额外的异常错误。

    创建 PapularPage.js 里面包含了NavigationBar.js

    /**
     * Created by liuml on 2017/9/11.
     */
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    }from 'react-native';
    
    import NavigationBar from "../compoent/NavigationBar.js"
    export default class PapularPage extends Component {
    
        render() {
            return <View style={styles.container}>
                <NavigationBar/>
            </View>
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1
        }
    });
    

    没啥说的 非常简单就是把NavigationBar加入到了这个Papular页面

    把上面的做好之后的效果图就是我上面的效果图


    OK 下面在PapularPage页面内添加 可以左右滑动的控件(选项卡控件)

    react-native-scrollable-tab-view

    用到一个第三方组件 http://www.jianshu.com/p/b7788c3d106e

    上面有使用方式 我把他引入我的项目

    
    /**
     * Created by liuml on 2017/9/11.
     */
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    }from 'react-native';
    
    import NavigationBar from "../compoent/NavigationBar.js"
    import ScrollableTabView from "react-native-scrollable-tab-view"
    export default class PapularPage extends Component {
    
        render() {
            return <View style={styles.container}>
                <NavigationBar/>
                <ScrollableTabView
                    tabBarBackgroundColor="#63B8FF"
                    tabBarActiveTextColor="#FFF"
                    tabBarInactiveTextColor="#F5FFFA"
                    tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
                    <Text tabLabel='IOS'/>
                    <Text tabLabel='Android'/>
                    <Text tabLabel='Java'/>
                    <Text tabLabel='JavaScript'/>
                </ScrollableTabView>
            </View>
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1
        }
    });
    
    

    mark

    比较简单没啥说的.

    现在的数据是写死的 后面会动态改变

    tabBarUnderlineStyle(style)
    设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色

    tabBarBackgroundColor(String)
    设置整个Tab这一栏的背景颜色

    tabBarActiveTextColor(String)
    设置选中Tab的文字颜色

    tabBarInactiveTextColor(String)
    设置未选中Tab的文字颜色

    tabBarTextStyle(Object)
    设置Tab文字的样式,比如字号、字体等


    下面是关于布局的总结:

    容器的属性

    flexDirection

    flexWrap

    justifyContent

    alignItems

    项目的属性

    flex

    alignSelf

    flexDirection属性

    flexDirection属性决定主轴的方向(即项目的排列方向)。
    它可能有4个值:

    row:主轴为水平方向,起点在左端。

    row-reverse:主轴为水平方向,起点在右端。

    column(默认值):主轴为垂直方向,起点在上沿。

    column-reverse:主轴为垂直方向,起点在下沿。

    flexWrap属性

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。它可能取三个值。

    (1)nowrap(默认):不换行。

    (2)wrap:换行,第一行在上方。

    justifyContent属性

    justify-content属性定义了项目在主轴上的对齐方式。

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
    flex-start(默认值):左对齐

    flex-end:右对齐

    center: 居中

    space-between:两端对齐,项目之间的间隔都相等。

    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    alignItems属性

    align-items属性定义项目在交叉轴上如何对齐。
    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    flex-start:交叉轴的起点对齐。

    flex-end:交叉轴的终点对齐。

    center:交叉轴的中点对齐。

    baseline: 项目的第一行文字的基线对齐。

    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    flex属性

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    alignSelf属性

    alignSelf属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

    默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    展开全文
  • 从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。那么react又是什么呢?他们...

    如有疏漏错误,还望指正。转载不忘加上>>原链接<<哦~

    react-native是什么? react-native原理
    这里写图片描述
    从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。

    我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。

    那么react又是什么呢?他们之间的连字符又有什么特殊的意义呢?下面我们来一一解答。

    首先我们来说说react。react是什么?

    官网上定义React是一个用于构建用户界面的js库。 React是声明式的,高效率的,并兼具灵活性(React is a declarative, efficient, and flexible JavaScript library for building user interfaces.)。

    我们来理解一下,用于构建用户界面的js库有很多啊,比如说angular,vue,jquery,ext等等,都可以被称为用户构建用户界面的js库。

    那么react和它们比又有什么不同呢?定义里说react是声明式的,高效率的,并兼具灵活性,这就是react的不同之处了,也可以称为react的几个特性吧。

    接下来我们就来分别介绍一下react的这几个特性。

    1.声明式声明式是由JSX语法来表现的。那么jsx语法又是啥?JSX是使XML可以嵌入JavaScript的语法。用以更加直观的描述UI。 JSX是JavaScript对象,可理解为createElement的语法糖。

    我们来对比一下,首先是原生的js语法:

    React.createElement(MyButton,{
        color:'blue',
        shadowSize:2
    },'Click Me');

    再来看一下jsx语法:

    <MyButton color="blue" shadowSize={2}>Click Me</MyButton>

    大家一看,这不就是一个语义化的标签么,这样写的确比上面写起来简单,看起来也更清晰,但这就是JSX了么?当然不是,JSX语法的重点在于它是与js代码混写的,配合es6就像下面这样:

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }

    现在是不是感觉有点cool了?JSX语法使用语义化的标签来简化代码的编写,提升了代码可维护性的同时也降低了学习成本

    现在主流的IDE和文本编辑器都可以通过安装插件来支持JSX语法。

    所以这个声明式指的是什么呢?指的就是上面代码中用大括号括起来的部分{this.props.name}这里类似于angular中的数据绑定。声明了UI中的表现与js中数据的关系。

    2.高效率高效率是由虚拟DOM来实现的

    虚拟DOM技术指的是使用javascript Object模拟DOM树,计算变更,减少重绘,提升效率的一种技术实现。

    这里有一篇文章,写的非常不错,我就直接给大家引用过来,大家自己看吧。
    >>虚拟DOM技术分析<<

    3.灵活性:这个灵活性范围就广了,有安装的灵活性,编写代码的灵活性等。我侧重来说一个,就是components,组件化。

    react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。组件化这个概念大家也都不是第一次听说了吧,如果比较陌生的同学,可以自己搜搜哈。

    react有它自己的组件化方式,就是所有模块都继承自React.Components,这比angular的modules更轻量级,结构也更简单,条条框框也减少了很多,是所谓真正的感受到了灵活性呢。

    代码示例就像上面讲JSX语法的时候引用的那段,大家体会一下。

    好的,我们了解完了react的三个特性,也对react有了初步的理解。那么回到我们最开始的问题:react-native是什么啊?

    字面上来说,我们已经了解了react,了解了native的含义,那么react和native又是如何联系起来的呢

    首先,React通过虚拟DOM实现了对UI层的解耦(无论是android还是ios)。

    然后,将浏览器的DOM树替换为Native的UI模块,使React在移动端进行渲染。

    最后,采用Native的核心API完成react与native的通信。
    这里写图片描述

    由于采用native原生UI作为展现层,所以react-native具有可以媲美原生应用的优秀用户体验与性能优势。

    我们对react-native的一些字面上的概念都有了一定的了解。我把以上内容简单的概括为:react-native是基于react技术编写native应用的一门技术,它继承了react简明、高效、灵活的特点,又兼具native优秀的用户体验。

    react-native技术采用js编码,编写的应用具有跨平台、可热更新的优势。这就是我眼中的react-native。

    展开全文
  • Cordova 和 React-Native 是使用 Web 开发移动端的两大框架, Cordova 是 Apache 旗下的,React-Native 是 Facebook 旗下的在2013年发布的一个前端框架,两者皆开源。下面的内容主要记录了这两大框架的优劣,以及...
  • 注:写页面时,当子组件是&lt;Text&gt;时一定不要固定父组件的宽高。 ...---------------------------------------------------------------------------------------------------------------------------...
  • react native实现登录...demo下载:react-native 完整实现登录功能1.完整目录2.实现的界面3.主界面的代码实现import React, { Component } from 'react'; import { ToolbarAndroid, AppRegistry, StyleSheet, Tex
  • 低版本号为:"react-native-baidu-map": "^0.6.0" ,前往1.0.6版 在 Xcode 9.4上运行,10.1运行编译有问题 GitHub:https://github.com/lovebing/react-native-baidu-map 先到百度地图创建应用: 申请开发版S...
  • React-Native学习指南

    2019-03-05 12:19:37
    本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列https://github.com/jondot/awesome-react-native 目录 教程 ...
  • react-native技术的优劣

    2018-02-27 23:35:18
    从2017年初开始到现在,使用React-Native做项目已经一年了。我们做的是一款IM软件,嵌入在一个手机游戏平台的工程内部。之所以要采用react-native(后文简称RN)框架重构它,是因为现在游戏大厅上的所有游戏都是热...
  • 这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得...
  • 由于前段时间写了一个React-Native的项目Mung,里面有一个图片浏览的功能,一般图片浏览都需要放大缩小和左右滑动,后来找了两个这方面比较好的控件react-native-gallery和react-native-image-viewer,但他们都有些...
  • 然后找到了react-native-amap3d这个第三方组件,很好用的一个地图组件,文档还比较细,GitHub上面Issuse也很活跃。 初次使用react-native开发APP还是有一些困难,这个组件是需要链接原生库的。就是说要使用react-...
  • 今天遇到了一个问题:下载了react-native-baidu-map的开源组件,可是在ios中遇到了问题,编译不通过,我想删除这个组件,然后写其他的功能,以后再添加这个地图功能,可是发现无法删除干净,android和ios原生都编译...
  • 在网上查找相关组件,开始使用的是react-native-qrcode组件,截图功能使用的是react-native-view-shot组件,保存图片则是使用的react-native自带的CameraRoll模块。以为这样就可以万事大吉了,没想到还是出了不明...
  • 今天学习了轮播图的使用,上网查阅了一下,发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件,对比了下文档,觉得react-native-swiper功能更加完善,而且文档说明比较全面,所以...
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...
1 2 3 4 5 ... 20
收藏数 59,771
精华内容 23,908
关键字:

react-native