#0、手把手教React Native实战之开山篇##作者简介东方耀    Android开发RN技术   facebookgithub  android ios  原生开发react reactjs nodejs 前端  进入 移动互联网 js nodejs    大波app 个人角度   学习的必要性    全栈工程师的捷径公司角度    组件化  成本降低  热更新 <font color=red size=5>加作者微信公众号（dongfangyao888）或扫描下面二维码</font><font color=red size=6>推送高清视频教程+语音解说+课堂笔记和源码</font>![微信号：dongfangyao888二维码](http://image17-c.poco.cn/mypoco/myphoto/20160309/23/17351665220160309234005020.jpg?430x430_120) ##技术背景app store facebook   html5   native app Hybrid app   native +  web   混合模式 ##视频课程简介1.基础语法2.API和组件3.App更新 热更新上架4.实战项目  3个  RN技术开发 ##0、配套视频(下载地址)：https://yunpan.cn/cY4JWzTtmVyNY  访问密码 7b60 或 http://vdisk.weibo.com/s/aLDC43gEH4wZV#12、手把手教React Native实战之View组件在React Native里有一个类似于div的组件，那就是View组件，支持多层嵌套，支持flexbox布局实例步骤：1.加载View组件2.创建组件3.添加样式表4.注册入口5.外层布局<View style={styles.container}><View style={styles.item}></View><View style={styles.item}></View><View style={styles.item}></View></View>6.flexbox水平三栏布局外联样式：style={styles.container}内联样式：style={{flex:1,borderWidth:1,borderColor:'red',flexDirection:'row'}}多个样式：style={[styles.container,styles.flex,{borderWidth:1,borderColor:'red'}]}7.上下两栏布局<View style={[styles.center,styles.flex]}><Text>团购</Text></View><View style={[styles.center,styles.flex]}><Text>客栈，公寓</Text></View>8.完善效果<View style={[styles.item,styles.lineLeftRight]}><View style={[styles.center,styles.flex,styles.lineCenter]}><Text style={styles.font}>海外酒店</Text></View><View style={[styles.center,styles.flex]}><Text style={styles.font}>特惠酒店</Text></View></View>##12、配套视频(下载地址)：https://yunpan.cn/cqYXSpE5UsAZ4  访问密码 2af4 或 http://vdisk.weibo.com/s/aLDC43gEHncVH#13、手把手教React Native实战之Text组件Text组件主要用于显示文本；具有响应性，可以嵌套，可以继承样式内部Text组件可以继承外部Text组件的样式Text组件的特性：1.onPress2.numberOfLines 最多显示多少行3.onLayout案例：网易新闻客户端 Text组件实现组件的颗粒度设计主要取决于应用的结构设计1.头部组件 单独封装 独立成一个文件`module.exports=Header;``const Header=require('./header');`2.列表组件` <List title='一线城市楼市退烧 有房源一夜跌价160万'></List>`3.重要新闻 组件`<ImportantNewsnews={['解放军报报社大楼正在拆除 标识已被卸下(图)','韩国停签东三省52家旅行社 或为阻止朝旅游创汇','南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻','防总部署长江防汛:以防御98年量级大洪水为目标']}></ImportantNews>``<TextonPress={this.show.bind(this,this.props.news[i])}numberOfLines={2}style={styles.news_item}>{this.props.news[i]}</Text>`警告的处理：数组里面需要key属性
参考：https://fb.me/react-warning-keys
需要翻墙（免费的翻墙浏览器 QQ群共享）##13、配套视频(下载地址)：https://yunpan.cn/cqP9zxBF5tEjU  访问密码 4838 或者 http://vdisk.weibo.com/s/aLDC43gEHmN6c##13、配套视频(补充)：https://yunpan.cn/cqPUEU4RjiKTI  访问密码 5814 或者 http://vdisk.weibo.com/s/aLDC43gEHmMRC#14、手把手教React Native实战之Navigator组件初探一个应用往往是由多功能视图组成！多页面的切换：路由或导航在RN中专门负责视图切换的组件：Navigator,NavigatorIOS导航器对比：Navigator和NavigatorIOS都可以用来管理应用中“场景”的导航（也可以称作屏幕）。导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。它们和html5中的history API很类似。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类，而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOS和Android，而NavigatorIOS只能用于iOS。NavigatorIOS
轻量、受限的API设置，使其相对Navigator来说不太方便定制。
由开源社区主导开发 —— React Native的官方团队并不在自己的应用中使用。
对于大多数正式的App开发，我们建议使用Navigator —— 使用NavigatorIOS实现复杂的需求很容易碰到麻烦。导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。
可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。最后的几行: renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);这里是每个人最疑惑的，我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push pop jump...等方法，这是我们等下用来跳转页面用的那个navigator对象。return <Component {...route.params} navigator={navigator} />
这里有一个判断，也就是如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，然后navigator作为props传递给了这个component。所以下一步，我们可以直接拿到这个 props.navigator:##14、配套视频(下载地址)：https://yunpan.cn/cqGDYIBDYr5rB  访问密码 cdec#15、手把手教React Native实战之Navigator参数传递怎么传递参数过去，或者从对方获取参数。##从列表页To详情页：
传递参数，通过push就可以了。params: {id: this.state.id}这个语法是把 routes.params 里的每个key 作为props的一个属性：{...route.params}componentDidMount() {//这里获取从列表页传递过来的参数: idthis.setState({id: this.props.id});}使用这个参数：{this.state.id}##从详情页To列表页：综合实例：从列表页传递用户id给详情页，详情页跟进用户id查询用户信息，并把
用户信息回传给列表页显示出来const self=this;params:{id:this.state.id,//从详情页获取usergetUser: function(user) {self.setState({user: user})}}if(this.props.getUser) {let user = USER_MODELS[this.props.id];this.props.getUser(user);}if(navigator) {//很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:List了navigator.pop();}##15、配套视频(下载地址)：https://yunpan.cn/cqGhLTHhhZnP2  访问密码 a8bd#16、手把手教React Native实战之TextInput组件文本输入框：基本组件 自动补全的搜索功能调试apk目录：DongFang\android\app\build\outputs\apkTextInput的主要属性和事件如下：autoCapitalize：枚举类型，可选值有none sentences words characters 当用户输入时，用于提示placeholder：占位符，在输入前显示的文本内容value：文本输入框的默认值placeholderTextColor：占位符文本的颜色password：boolean类型 true表示密码输入显示*multiline：多行输入editable：文本框是否可输入autoFocus:自动聚焦clearButtonMode：枚举类型，never while-editing unless-editing always 用于显示清除按钮maxLength：能够输入的最长字符数enablesReturnKeyAutomatically：如果为true 表示没有文本时键盘是不能有返回键的，其默认值为falsereturnKeyType：枚举类型 default go google join next route search send yahoo done emergency-call 表示软键盘返回键显示的字符串secureTextEntry：隐藏输入内容，默认值为falseonChangeText：当文本输入框的内容变化时，调用改函数；onChangeText接收一个文本的参数对象onChange：当文本变化时，调用该函数onEndEditing：当结束编辑时，调用改函数onBlur：失去焦点触发事件onFocus：获得焦点时触发事件onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件案例：搜索框##16、配套视频(下载地址)：https://yunpan.cn/cSFjnXwyzXRip  访问密码 ef33#17、手把手教React Native实战之TextInput自动提示的搜索框接着16讲的搜索框继续，加上自动提示的功能很多app的搜索都是这样的：我们输入一个关键词的时候，会列出相关的搜索结果列表，一般情况下，完成该功能需要一个搜索服务，返回N条结果，并将其展示出来;这里我们用静态数据模拟出来。##17、配套视频(下载地址)：https://yunpan.cn/cS3vKXfQunD39  访问密码 52b9#18、手把手教React Native实战之Touchable类组件React Native没有像Web开发那样给元素绑定click事件，前面讲的Text组件有onPress事件回调，View组件是没有的，但是在实际项目开发中，很多其他的组件也是需要可以被点击的，RN提供了3个组件来赋予被点击的能力（去包裹其他组件即可），这3个组件被称为“Touchable类组件”：1.TouchableHighlight  高亮属性：activeOpacity(设置透明度)、onHideUnderlay、onShowUnderlay、underlayColor(点击时背景阴影效果的背景颜色)2.TouchableOpacity   透明度属性：activeOpacity3.TouchableWithoutFeedback 无反馈 不会出现任何视觉变化不建议使用；属性：onLongPress、onPressIn、onPressOut在app中我们希望点击的时候会有一些视觉上的变化，这个变化会提醒我们已经点击过了，从而避免重复点击##18、配套视频(下载地址)：https://yunpan.cn/cS3vW9nauRNxa  访问密码 6a08#19、手把手教React Native实战之图片Image组件React Native的Image组件调用的图片途径比较多：网络图片、本地图片、照相机图片#Image组件的属性：resizeMode：图片适用的模式 cover、contain、stretchsource:图片的引用地址网络图片：source={{uri:'http://.png'}}本地图片：source={require('./baidulogo.png')}静态图片资源：注意：如果你添加图片的时候packager正在运行，则你需要重启packager以便能正确引入新添加的图片。这样会带来如下的一些好处:iOS和Android一致的文件系统。
图片和JS代码处在相同的文件夹，这样组件就可以包含自己所用的图片而不用单独去设置。
不需要全局命名。你不用再担心图片名字的冲突问题了。
只有实际被用到（即被require）的图片才会被打包到你的app。
现在在开发期间，增加和修改图片不需要重新编译了，只要和修改js代码一样刷新你的模拟器就可以了。
与访问网络图片相比，Packager可以得知图片大小了，不需要在代码里再声明一遍尺寸。
现在通过npm来分发组件或库可以包含图片了。注意：为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串。#使用混合App的图片资源如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸注意：网络图片，你需要手动指定图片的尺寸关于图片的尺寸，React Native会自动为你选好。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。##19、配套视频(下载地址)：https://yunpan.cn/cS3ekcwmwhLSz  访问密码 2023#20、手把手教React Native实战之Picker组件和箭头函数本组件可以在iOS和Android上渲染原生的选择器（Picker）##20、配套视频(下载地址)：https://yunpan.cn/cSueHJKakErf2  访问密码 f349#21、手把手教React Native实战之ProgressBar组件分平台的：ProgressBarAndroid  ProgressViewIOSstyleAttr：进度条的样式 Horizontal Small Large Inverse SmallInverse LargeInverseprogress：当前的进度值（在0到1之间）##21、配套视频(下载地址)：https://yunpan.cn/cSx7C5nTQWx5q  访问密码 648b#22、手把手教React Native实战之DrawerLayoutAndroid组件封装了平台DrawerLayout（仅限安卓平台）的React组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。drawerPosition：DrawerLayoutAndroid.positions.Right 左右 默认左drawerWidth：指定抽屉的宽度，也就是从屏幕边缘拖进的视图的宽度onDrawerCloseonDrawerOpenonDrawerSlide：每当导航视图（抽屉）产生交互的时候调用此回调函数onDrawerStateChanged：idle（空闲） dragging（拖拽中） settling（停靠中）renderNavigationView：渲染一个可以从屏幕一边拖入的导航视图drawerLockMode：设置抽屉的锁定模式 有三种模式：1.unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作2.locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。3.locked-open，意味着此时抽屉将保持打开，不可用手势关闭。无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭##22、配套视频(下载地址)：https://yunpan.cn/cSx7azQYEez7g  访问密码 de38#23、手把手教React Native实战之ViewPagerAndroid组件初探一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。注意所有的子视图都必须是纯View，而不能是自定义的复合容器属性：1.initialPage 初始选中页的下标2.onPageScroll 当在页间切换时（不论是由于动画还是由于用户在页间滑动/拖拽）执行回调参数中的event.nativeEvent对象会包含如下数据：
position offset 一个在[0,1)（大于等于0，小于1）之间的范围，代表当前页面切换的状态3.onPageScrollStateChanged idle dragging settling4.onPageSelected 这个回调会在页面切换完成后（当用户在页面间滑动）调用回调参数中的event.nativeEvent对象会包含如下的字段： position5.scrollEnabled boolean##23、配套视频(下载地址)：https://yunpan.cn/cS6VtFy7F3CVE  访问密码 68d1#24、手把手教React Native实战之ViewPagerAndroid做引导页开始做个小项目(DfyProject01) 来将知识点串起来ViewPagerAndroid做引导页我们能学到：1.组件如何联动2.符合ES6的标准写法3.组件的封装 非常灵活4.Navigator路由的用法##24、配套视频(下载地址)：https://yunpan.cn/cSkk5qHjkRLEz  访问密码 f305#25、手把手教React Native实战之仿异步获取网络数据进入首页HomeUI获取网络数据Android原生开发：子线程 handler机制  异步任务AsyncTaskReactNative 擅长UI界面处理  通过this.state来触发RN中的网络请求：XMLHttpRequest Fetch  post getMVC mListView.setAdapter(new myAdapter)  Item封装成一个组件   <Item ></Item>##25、配套视频(下载地址)：https://yunpan.cn/cS2TIyZEaKs9m  访问密码 f8f4#26、手把手教React Native实战之开源轮播组件react-native-swipergithub上搜索 react-native-swiper在项目的根目录（即package.json文件所在的目录）npm的命令：安装模块：npm i react-native-swiper --save查看模块：npm view react-native-swiper删除模块：npm rm react-native-swiper --save清理缓存：npm cache clean查看帮助命令：npm help 命令入口组件：DfyProject01  注意：设置轮播组件Swiper的包裹容器高度，使用属性设置，不能通过样式设置实现滚动视图：ScrollView 计算步长##26、配套视频(下载地址)：https://yunpan.cn/cS5vMhdBG3Wat  访问密码 e6a9#27、手把手教React Native实战之WebView组件Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。重点理解：为什么rn中会有WebView？automaticallyAdjustContentInsets：是否自动调整内部内容bounces（IOS）：回弹效果 如果为false，则内容拉到底部或头部不回弹，默认为truedomStorageEnabled(Android)：仅限Android平台。指定是否开启DOM本地存储javaScriptEnabled：仅限Android平台。iOS平台JavaScript是默认开启的contentInset：内部内容偏移值 该值为一个JavaScript对象{top:number,left:number,bottom:number,right:number}source:{{uri:'网址'}}在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）{{html:'html代码块'}}injectedJavaScript:注入的js代码，其值为字符串，如果加上了该属性，就会在webview里面执行js代码（在网页加载之前注入）mediaPlaybackRequiresUserAction：设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为falseonNavigationStateChange：监听导航状态变化的函数（当发现浏览器地址改变时，触发事件）renderError：监听渲染页面出错的函数startInLoadingState：是否开启页面加载的状态renderLoading:webview组件正在渲染页面时触发的函数，需要同startInLoadingState一起使用，当startInLoadingState为true时该函数才起作用scrollEnabled（IOS）：表示webview里面页面是否能滚动，如果其值为true则可以滚动，否则禁止滚动scalesPageToFit：按照页面比例和内容宽高比例自动缩放内容##27、配套视频(下载地址)：https://yunpan.cn/cSeEkqgveNvJ8  访问密码 3207#28、手把手教React Native实战之常用IDE开发工具Web前端：WebStorm Sublime  都是收费的 FaceBook官方：nuclide 只支持Mac 基于Atom（github的）（Atom最大的特色就是可以安装很多的插件来完成我们的需求）炫酷插件跨平台免费的：微软老大哥的 Visual Studio Code 免费的 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作Visual Studio Code 现在已经支持大量的扩展插件，大家可以根据自己的需求打造出最适合自己使用的编辑器了
插件：https://marketplace.visualstudio.com/VSCode##28、配套视频(下载地址)：https://yunpan.cn/cSUnwQGHxKrm6  访问密码 75ee#29、手把手教React Native实战之ListView组件原生：mListView mAdapter List集合数据  MVCListView组件是React Native中一个比较核心的组件，用途非常的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象，同时给该对象传入一个简单的数据集合。并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组)，该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)由于平台差异性，React Native 中的滚动列表组件 ListView 并没有直接映射为 android 中的 ListView 或 iOS 中的 UITableView，而是在ScrollView 的基础上使用 JS 做了一次封装。这样，滚动体验部分由 Native 负责，而 React 部分则专注于组件何时渲染、如何渲染等问题。数据源默认的格式有三个维度：第一个维度是 sectionId ，标识属于哪一段， 可以手动指定或隐式地使用数组索引或对象的 key 值；
第二个维度是 rowId ，标识某个数据段下的某一个行，同样可以手动指定或隐式地使用数组索引或对象的 key 值；
第三个维度是具体的数据对象，根据实际的需要而定。
需要注意的是，上面只是 默认的数据格式 ，如果它不符合实际的需求， 完全可以使用自定义的数据结构 。唯一的区别就是需要额外指定给 ListView 数据源中哪些是 id，哪些是 rowData。![listview数据格式](http://image18-c.poco.cn/mypoco/myphoto/20160601/22/17351665220160601220430096.png?755x561_130) DataSource 的构造函数接收以下4个参数（都是可选）：
rowHasChanged : 用于在数据变化的时候，计算出变化的部分，在更新时只渲染脏数据；
sectionHeaderHasChanged : 同理，在列表带分段标题时需要实现；
getRowData/getSectionHeaderData : 如果遵循默认的数据源格式，这两个方法就没有必要实现，用内部默认的即可；而当数据源格式是自定义时，需要手动实现这两个方法。DataSource 的初始化一般在 constructor 方法中数据源确定后，下一个工作就是列表的渲染。在渲染时发挥重要作用的是 renderRow 属性，它接收数据源中保存的数据对象，并通过返回值确定该行该如何进行展现。我们可以对所有行统一进行展现，也可以根据里面的字段做出不同的展现。在列表包含 sectionHeader 时，还需要实现 renderSectionHeader 方法。#注意要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法（如果用到了section，则对应cloneWithRowsAndSections方法）。数据源中的数据本身是不可修改的，所以请勿直接尝试修改。clone方法会自动提取新数据并进行逐行对比（使用rowHasChanged方法中的策略），这样ListView就知道哪些行需要重新渲染了。#React Native ListView sticky效果实现dataBlob{The dataBlob is a data structure (generally an object) that holds all the data powering the ListView}：dataBlob 包含ListView所需的所有数据（section header 和 rows），在ListView渲染数据时，使用 getSectionData 和 getRowData 来渲染每一行数据。 dataBlob 的 key 值包含 sectionID + rowId![dataBlob](http://image18-c.poco.cn/mypoco/myphoto/20160601/22/17351665220160601221412055.png?677x356_130) sectionIDs[]：用于标识每组section![dataBlob](http://image18-c.poco.cn/mypoco/myphoto/20160601/22/1735166522016060122232005.png?958x356_130) rowIDs[]：用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。
![dataBlob](http://image18-c.poco.cn/mypoco/myphoto/20160601/22/1735166522016060122220803.png?576x340_130) 片段头sticky失效原因：1.Found this out by accident, but if you put your ListView inside a ScrollView, the headers will not be sticky2.iOS RCTScrollView implements sticky headers 而android没有3.ListView的Android版本不支持sticky-header特性4.用这个替代：https://github.com/emilsjolander/StickyScrollViewItems##29、配套视频(下载地址)：https://yunpan.cn/cSIci374GY5IE  访问密码 0af6#30、手把手教React Native实战之ListView高级特性##分页当数据量很大的时候如何分页加载 。这种情形分两种情况考虑：1.数据一次性拿到，边滚动边加载2.数据不是一次性拿到，而是有可能分屏取数据对于第一种情况，在 ListView 内部其实已经做了分页的处理：ListView 内部通过 curRenderedRowsCount 状态保存已渲染的行数；
初始状态下，要加载的数据条数等于 initialListSize （默认为 10 条）；
在滚动时检测当前滚动的位置和最底部的距离，如果小于 scrollRenderAheadDistance (默认为 1000)，就更新 curRenderedRowsCount ，在它原有值基础上加 pageSize 个（默认为 1 条）；
由于属性变化，触发了 ListView 重新的 render 。在渲染过程中， curRenderedRowsCount 起到截断数据的作用，React 的 diff 算法使得只有新加入的数据才会渲染到了界面上。
整个过程类似于 Web 端懒加载机制，即 每次在和底部的距离达到一个阈值时，加载接下来的 pageSize 个数据 。对于第二种情况，ListView 提供了相关的属性：onEndReachedThreshold ，在滚动即将到达底部时触发；
onEndReached ，在已经到达底部时触发；我们可以在这两个方法中调用接口去拿数据，取到数据后再更新数据源。##多列(Grid效果)很多页面中的列表并非单列的，乍一看似乎要做出不少调整，但实际上只通过布局即可达到相关效果。ListView 并没有强制要求一个 rowData 在展示时一定要占满一行，在多列的情况下，我们适时调整每个 rowData 占据的宽度即可。![grid](http://image18-c.poco.cn/mypoco/myphoto/20160602/23/17351665220160602230133097.png?319x112_130) 由于 React Native 使用 Flexbox 进行布局，给ListView设置属性contentContainerStyle；在实现多列时，主要用到的是 flexWrap：wrap 属性：它的效果类似于 float，即水平地排列每一项，当放不下时进行折行处理。在设置每行视图占据一半宽度后就达到了两列的效果，多列的类似。##滚动ListView 只是整合了数据和展现，但实际滚动的功能还是由 ScrollView 全权负责。ScrollView 实现完全和平台相关：在 iOS 上，它映射为 RCTScrollView ；在 Android 上，它映射为 RCTScrollView 和 AndroidHorizontalScrollView 。React Native 让不同端上的技术融合在了一起，同时也给开发人员提出了更高的要求。以 ScrollView 为例，大量的属性其实原封不动映射给了 UIScrollView ，这就意味着如果想再深入地研究下去，必须对客户端相关技术有足够了解。无论是前端还是客户端，跳出自己熟悉的那片领域也许才是更进一步的关键。谈到滚动，有一点不得不说的就是 列表的无限加载 ，这牵涉到滚动的性能。Github 上的这个 issue 对此展开了热烈的讨论。其中有人就提到，数据量很大情况下，ListView 在加载时所占用的 CPU 和内存会大大增加，滚动到最后就导致了应用 crash。为此，ListView 中新添加了一个实验性的属性： removeClippedSubviews ，它能在滚动时及时删掉列表中处于视窗的之外的行，以此达到降低内存消耗的目的。不幸的是，即使设置了这个属性，程序虽然各项占用减少了不少，但还是没避免崩溃的命运。处于好奇，我也在最新版的 ListView 基础上做了简单尝试，不断加载一个无限大的列表，但并没有出现崩溃的情况：即使加载了 3000、4000 行，Android 真机、iOS 真机和 iOS 模拟器上都没有崩溃；
Android 上明显感到数据加载有 阶段性的延时 ，即滚动一定程度后，再次滚动数据始终加载不出来或要等一段时间才加载出来，体验较差；iOS 相比要流畅的多；
但不崩溃并非最终的目的，很多 React Native 使用者都在试图改进 ListView 的性能表现，相比于直接使用 Native 端的组件，ListView 性能还是差强人意，有很大优化空间。##总结ListView 并没有创造出新的东西，它只是集各家所长，很好地将 React 的视图渲染和 Native 端很成熟的滚动机制融合在了一起，使用起来和其他组件无差，静态地定义View、动态地组织数据，是给人带来的直观感受。##30、配套视频(下载地址)：https://yunpan.cn/cSIn34RprDCr3  访问密码 c927#31、手把手教React Native实战之开源Tab导航组件react-native-tab-navigator##Visual Studio Code编辑工具：1.解决修改字体或其他报错的问题2.使用技巧：拆分编辑器 ctrl+\3.无插件化的代码diff：右键文件--->选择以进行比较4.格式化js文件  右键代码区域--->格式代码 Alt+Shift+F开源组件react-native-tab-navigator：React Native原生的控件仅有TabBarIOS可供iOS平台使用React的核心思想：组件化   特别适合一个团队开发项目##react-native-tab-navigator的好处：1.跨平台 纯js 支持android与ios##31、配套视频(下载地址)：https://yunpan.cn/cShV9HNmL2Tah  访问密码 d3a6#32、手把手教React Native实战之开源侧边栏组件react-native-side-menu当前项目目录：npm i react-native-side-menu --save导入：import SideMenu from 'react-native-side-menu';用RN实现仿QQ的侧边栏效果注意：Menu组件里面 使用ScrollView必须设置scrollsToTop={false}##32、配套视频(下载地址)：https://yunpan.cn/cS7cyi5pZWsgn  访问密码 1b71#33、手把手教React Native实战之Windows下玩苹果RN开发android与ios；ios的系统也是必须要的mac电脑：可以直接调试ios与androidwindows：只能调试android黑苹果：自从苹果采用Intel的处理器，OS X被黑客破解后可以安装在Intel CPU与部分AMD CPU的机器上。从而出现了一大批未购买苹果机而使用苹果操作系统的机器，被称为黑苹果(Hackintosh)；在Mac苹果机上面安装原版Mac系统的被称为白苹果（Macintosh），与黑苹果相对。虚拟机装苹果：系统要给力点  Hosthttp://jingyan.baidu.com/article/d621e8da27fe7c2865913fde.html软件工具下载：http://pan.baidu.com/s/1bItYsm##33、配套视频(下载地址)：https://yunpan.cn/cRjrydFi568Ri  访问密码 12e5#34、手把手教React Native实战之Mac环境搭建(Windows虚拟机)1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2.brew install node3.brew install watchman4.推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本5.安装Xcode 7.1 不要安装最新版本 注意安全风险发生6.npm install -g react-native-cli7.将npm仓库源替换为国内镜像8.react-native init DongFang9.运行iOS应用Win7是Server，Mac是Client，VMware上运行Mac系统
1、在VMware的Options菜单中选择Shared Folders选项
2、选择Always enabled选项
3、然后选择要在Win7系统上共享的文件夹路径名
4、在Win7系统下将改文件夹设为共享
5、进入MAC系统桌面右键点击Finder前往菜单Connectting to Server
6、在连接服务器对话框中输入[smb://Windows主机的IP地址],其中smb是访问Windows共享文件夹所使用的协议名称
7、连接到Windows主机之后会显示该主机所共享的文件夹，选择想要访问的一个即可
8、这样再次打开Finder的时候就可以直接访问到共享文件夹了##34、配套视频(下载地址)：https://yunpan.cn/cRjrK4xHsxTyQ  访问密码 1e8b#35、手把手教React Native实战之如何调试(Android 5.0及以上)不用设置ip和端口：开启USB调试，使用adb reverse命令，运行adb reverse tcp:8081 tcp:8081 就可以使用Reload JS和其它的开发选项了大部分现代的安卓设备已经没有了硬件"Menu"按键，这是我们用来调出开发者菜单的。在这种情况下你可以通过摇晃设备来打开开发者菜单(重新加载、调试，等等……)(Android 5.0以下)需要设置ip+端口：摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单1.调试输出 console.log();2.打断点breakpoint 看value##35、配套视频(下载地址)：https://yunpan.cn/cRQAuehFTkXgi  访问密码 a04a#59、手把手教React Native实战之通用Tab组件react-native-scrollable-tab-view初探既然是通用就适配android&IOS开源项目地址：https://github.com/skv-headless/react-native-scrollable-tab-view当前项目目录：npm i react-native-scrollable-tab-view --save --force导入：import ScrollableTabView from 'react-native-scrollable-tab-view';属性介绍：1.renderTabBar renderTabBar={() => <DefaultTabBar/>}TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar，也可以自定义每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字DefaultTabBar：Tab会平分在水平方向的空间ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示2.tabBarPosition 位置默认为'top'tabBarPosition='top' ['top','bottom','overlayTop','overlayBottom']3.onChangeTabTab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数
i：被选中的Tab的下标（从0开始）
ref：被选中的Tab对象（基本用不到）4.onScroll视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab数量-1]5.locked表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。locked={false}6.initialPage 初始化时被选中的Tab下标，默认是0（即第一页）7.page(Integer) 设置选中指定的Tab 作者打算废除8.children(ReactComponents) 表示所有子视图的数组9.tabBarUnderlineColor(String) 设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色10.tabBarBackgroundColor(String)设置整个Tab这一栏的背景颜色11.tabBarActiveTextColor(String)设置选中Tab的文字颜色12.tabBarInactiveTextColor(String)设置未选中Tab的文字颜色13.tabBarTextStyle(Object)设置Tab文字的样式，比如字号、字体等14.style (View.propTypes.style)  系统View都拥有的属性15.contentProps(Object)  react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。16.scrollWithoutAnimation(Bool，默认为false) 设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）这个属性的设置对滑动视图切换的动画效果没有影响，仅仅对“点击”Tab效果有作用17.prerenderingSiblingsNumber(Integer，默认为0)预渲染附件视图的个数 为0只渲染当前页##59、配套视频(下载地址)：http://www.reactnative.vip/thread-289-1-1.html#未完待续。。。作者：东方耀 QQ：309623978