React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件.支持iOS和安卓. 2,如需要截取ScrollView,只需要将”full”传递给snapshot方法即可. captureRef方法和captureScreen方法都可以设置…

1.封装组件 src/components/VideoPlayer/index.js /** * 视频播放器 组件(VideoPlayer) */ import React, {Component} from 'react'; import { StyleSheet, Text, View, Dimensions, ActivityIndicator, TouchableOpacity, } from 'react-native'; // 播放器组件 import Video from 'rea…

一.简言 初学RN,一切皆新.View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件.View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件的布局排列,默认View组件的布局为纵向布局,一般开发中需要把它转为横向布局使用.现在使用最基本的组件View容器组件,创建一个九宫格.这里会通过给组件设置伸缩性布局完成布局样式.代码如下: /** * Sample React Native App * https://github.com/fac…

React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. 通常我们会在componentWillMount方法中执行异步数据请求,然后调用setSt…

通过官网的react-native init myProject,并打开Android Studio的手机模拟器进行调试 下面的代码使用了 Text .Image.View.TextInput和的react-native-modal-dropdown(下拉框)的组件,初步开发了一个登陆界面 1.Image的 source静态资源需要 require的引入,服务器资源的引入uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Banan…

React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. 支持上拉加载. 其中,SectionList适合分组/类/区,但是在0.43版本中,如果希望section的头部能够吸顶悬浮,请暂时先使用老版的<ListVie…

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 Image组件的常见属性 属性方法 onLoad(function):当图片加载成功后,回调该方法 onLoadStart(f…

此文已由作者王翔授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用react-native的时候能够看到不少函数调用式的组件,像LinkIOS用来呼起url请求  LinkIOS.openUrl('http://www.163.com'); actionSheetIOS用来实现ios客户端底部弹起的选择对话框 ActionSheetIOS.showActionSheetWithOptions({   options: BUTTONS,   cancelButtonIn…

一.简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可.但是,对于需要交互性和美观性的对话框,alert就明显无法满足需求了,首先alert对话框比较丑陋,不符合我们的业务和审美需求,此时如果我们去定制的话,稍微有些浪费.React-Native在这一点上做的很好,给我们提供了一个原生的对话框,那就是AlertIOS,跟iOS中的UIAlertView(deprecated use)样式基本无差. 二.API Al…

一.简介 在移动端开发中,很多时候需要嵌入一个网页来帮助实现某一个活动,这方式大大提高了活动快速迭代的灵活性,在RN中,同样也这么处理这种情况的.其实,这种混合式开发称为Hybird APP,它们就是基于WebView来实现的.React-Native中的WebView组件提供的功能基本满足需求,现在就让我们来研究一下. 二.属性 //HTML字符串.已过期,官方推荐使用source代替 hml:PropTypes.string //URL字符串.已过期,官方推荐使用source代替 url:P…