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深度结合
  • 移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性...
  • 刚刚度过了繁忙的一个月,连续不断的需求让自己有点招架不住了。写的代码质量有些堪忧,又导致不断的修改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…

    展开全文
  • 从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、踩坑记录

    展开全文
  • 注:写页面时,当子组件是<Text>时一定不要固定父组件的宽高。 ...---------------------------------------------------------------------------------------------------------------------------...

     

    • 注:写页面时,当子组件是<Text>时一定不要固定父组件的宽高。

    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    今天使用react-native-easy-toast框架的时候,在跟标签下面加上了

    若用户设置了系统字体大小,适配就会出现问题。(例如:子组件的文字显示不完全或者父组件过大)

    应当使父组件自动包裹子组件<Text>的宽和高.

    <Toast ref={toast => {
        this.toast = toast
    }}/>/*必须写在页面的最底部*/

    于是乎出现了下面的错误。

    直接把后面跟的注释去掉就行了。

    ---------------------------------------------------------------------------------------------------------------------------------

    2,千万要注意,不要被console.log所蒙蔽,有可能它给你打印出来的null是个字符串哦。所以在判断一个变量是否为空时,千万不要使用if(变量名)...的格式。一定要写一个工具类。

     

    ---------------------------------------------------------------------------------------------------------------------------------

     

    这个错误暂时真的没有找到如何修改native 版本的地方,只能修改js的版本了。可以使用

    npm install --save react-native@版本号

    来修改js的版本。究竟为什么会出现这种情况,也不太清楚。求知道的大佬们告知。

    更新:这个错误是在Android到处jsBundle时的错误,导出时的版本和当前版本不一致导致的,可以重新手动导出bundle文件即可。

    --------------------------------------------------------------------------------------------------------------------------------

    3,在使用Text Input时,Android平台手动取消焦点时键盘不会消失。

     

    //用于Android隐藏软键盘
    const dismissKeyboard = require('dismissKeyboard');
    //隐藏函数:dismissKeyboard();

    ---------------------------------------------------------------------------------------------------------------------------------

    4,Could not expand ZIP 错误

    一般是没有清楚缓存导致不能解压,可以执行命令:cd android && gradlew clean && cd .. && react-native run-android

    ---------------------------------------------------------------------------------------------------------------------------------

    5,手动导出bundle文件时异常

    这是因为在react native在0.49之后将index合成了一个文件‘index.js’,而网上的命令大部分都是之前的,所以出现这个问题,执行:react-native bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false 即可正常导出bundle。

    注:如果不能成功,先看看自己的版本是多少。

    ---------------------------------------------------------------------------------------------------------------------------------

    6,Android打包后运行闪退的问题:

    打包后运行直接闪退,打开log发现错误信息如上图,这个时候打开android/app/src/main/assets/index.android.bundle,搜索u.View.proptypes.style,将搜索到的地方替换为u.ViewPropTypes.style即可。

    至于原因,目前还不清楚,猜测是Facebook团队把View.proptypes.style废弃的原因。

    ---------------------------------------------------------------------------------------------------------------------------------

    7,TextInput设置secureTextEntry属性时,却发现没有作用。

    问题出在TextInput的keyboardType属性,当它的属性为某些值时,例如(email-address)是没有办法将输入框中的内容隐藏的。

    ---------------------------------------------------------------------------------------------------------------------------------

    8,开发过程中无法打开debug模式(开发者菜单)的问题。

    在Android目录中的Mainaplication 的getUseDeveloperSupport回调中,返回true即可。

    ---------------------------------------------------------------------------------------------------------------------------------

    9,手动生成jsbundle包。

    执行命令:react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

    ---------------------------------------------------------------------------------------------------------------------------------

    10,设置CardStackStyleInterpolator报错问题。(v:0.55.4)

    现在网上的路径大多都是CardStack目录下的文件,但通常都找不到该文件。其实目录已经不在那里了。以下才是正确的目录:

    import CardStackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';
    展开全文
  • 写一个用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源码 React16源码之React Fiber架构 从源码看React异常处理 从源码看React.PureComponent ...web移动端布局的那些...React Native转web方案:react-native-web React Native Icon方案:react-native-svg ...
  • 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-cli安装版本不能低于0.60.0 error Cannot use React Native CLI to initialize project with version lower than 0.60.0.如何安装低版本 启动命令: react-native run-android 安卓模拟器总是...
  • 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对于初学者常见的困惑是弄不清ReactReact.js、React-Native这三者之间的关系,有必要先说明一下:React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发网页或移动应用。...
  • 然后找到了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功能更加完善,而且文档说明比较全面,所以...
1 2 3 4 5 ... 20
收藏数 60,046
精华内容 24,018
关键字:

react-native