这次介绍的获取移动设备信息的组件名叫:react-native-device-info,兼容IOS和安卓双平台,可以获取设备ID、设备品牌、设备型号、IP以及APP版本号等信息。...安装 npm install--save react-native-device-info 注:如果React Naitve的版本大于0.47,那么需要使用>=0.11版本的react-native-device-info...组件 因为涉及到原生代码,所以在执行完install后,需要执行link命令 react-nativelink react-native-device-info 使用示例 import DeviceInfo...from 'react-native-device-info'; const device = {}; device.DeviceID = deviceInfo.getUniqueID();...组件地址 该组件的详细说明和示例可以进入GitHub查看。 GitHub地址:https://github.com/rebeccahughes/react-native-device-info
一、组件说明: 该组件同时适配Android和IOS平台。...二、组件介绍 1.首先需要安装组件:npm install react-native-device-info --save 2.IOS初始化:打开Xcode——>右击Libraries——>选择文件到当前项目.../react−native/Reactand(SRCROOT)/../...../React 并且修改 recursive 2.3.好了,下面就是基本的用法了 import DeviceInfo from 'react-native-device-info' console.log...link react-native-device-info 3.2在MainActivity.java文件中进行注册模块(react-native的版本需要>0.18) import com.learnium.RNDeviceInfo.RNDeviceInfo
前言 本系列是基于React Native版本号0.44.3写的。任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传、逆传已经通过通知传值。...:父控件给子控件传递一个name属性的值,子控件展示父控件传递过来的值: image.png 上述代码的数据传递其实是这样的: 主组件 -> FatherComponent -> SonComponent...但是有时候,我们并不是在创建 子组件 的时候就传递值,而是需要等待某个触发事件的时候,再传递,这就涉及到获取子组件传值。 通过ref拿到组件,然后传值 举个?...image.png image.png 逆传 使用方法回调: 在父组件定义一个处理接收值的方法 把这个方法传递给子组件,并且绑定this,子组件就能通过this.props拿到这个方法调用 举个例子,...好了,组件间传值就讲到这里了。 致谢 如果发现有错误的地方,欢迎各位指出,谢谢!
_testData: string; get testData(): string {return this...._testData = data; } 就可以直接 model.testData = 'test'; 设置 console.log(model.testData); 获取
组件生命周期 众所周知,React Native是一个以组件为基本元素的开发框架,系统为我们提供了大量的现成的组件,我们也可以继承系统的Component和PurComponent自定义组件。...既然是组件,那它就有自己的生命周期,通过不同的生命周期函数,我们可以干不同的事情。...React Native将组件的生命周期分为如下几个阶段,总的概括起来有:挂载、存活和销毁几个阶段,涉及到的生命周期函数可以用下面的图来表示。 下面我们就这些生命周期函数给大家做一个总结。...getDefaultProps getDefaultProps函数的定义如下: object getDefaultProps() 此方法在对象被创建之前执行,因此不能在方法内调用this.props,被创建的类会有缓存,映射的值会存在
React Native 表格组件:react-native-data-table,纯JS组件,功能强大。支持自定义表头、行、单元格样式。支持编辑单元格和选择列。还能显示子行。 效果图 ?...安装方法 npm install--save react-native-data-table 组件说明 表格组件主要分成以下几部分: DataTable 表格 HeaderCell 列头 Row 行 Cell...单元格 CheckableCell 可选择单元格 EditableCell 可编辑单元格 Expansion 子行 其他使用方法类似于官方的ListView组件 使用示例 import { Cell..., DataTable, Header, HeaderCell, Row, EditableCell, CheckableCell, } from 'react-native-data-table...组件地址 https://github.com/sussol/react-native-data-table
最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家。...所以我通过百度查询,一个一个的查到了这些RN组件的UI表现图,下面呈现给大家 阅前必读 首先表示抱歉,我没有注明每幅图片的url来源,这是有原因的,因为当前有很多人的博客转载他人的博客却没有注明出处,如果我莽撞地写上我找到该图片的...其他注意点⚠️ 1.没有UI表现,纯功能性或者功能性为主的组件下面自然没有列出样式图比如imgaPickerIOS,PushNotificationIOS, Dimensions,PixelRatio...,Animated,CameraRoll,clipBoard,webView,backHandler,PermissionsAndroid,同时非常常用的基础组件和交互组件也没有加上去,因为他们在官网上都有...RefreshControl 此组件用在ScrollView及其衍生组件的内部,用于添加下拉刷新的功能。 StatusBar 用于控制应用顶部状态栏样式的组件。
静态图片资源 从0.14版本开始,React Native提供了一个统一的方式来管理iOS和Android应用中的图片。...在上面的这个例子里,是哪个组件引用了这个图片,Packager就会去这个组件所在的文件夹下查找my-icon.png。...不过网上提供了第三方的组件react-native-image-picker,这个组件同时支持photo和video,也就是照片和视频都可以用。...我们使用npm安装这个组件: npm install --save react-native-image-picker 典型使用方法 import ImagePickerManager from 'NativeModules...} from 'react-native'; // 导入JSON数据 var productData = require('.
一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似...React Native 开发中,由于使用的是与前端相同的 JavaScript 语言,衔接 Echarts 的工作相对顺畅些,不过一些必要的组件封装还是能够大大提高开发效率的。...WebChart 具体使用可参见 App.js ,style 的设置就和普通的 React Native 组件一样,可使用 flex ,也可设为定值。...Echarts与React Native组件的通信 在 React Native 的 WebView 组件中,提供了 onMessage 和 postMessage 来进行 html 与组件的双向通信,...Native 组件的通信。
React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View...安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen()...import { captureScreen } from "react-native-view-shot"; captureScreen({ format: "jpg", quality:...reference名称来截取 import { captureRef } from "react-native-view-shot"; render() { return ( <ScrollView...示例源码 https://github.com/forrest23/ReactNativeComponents 组件地址 https://github.com/gre/react-native-view-shot
前面说过,React Native作为一个全新的跨平台开发框架,好多东西还不是很成熟,很多原生的控件还不是很完善,于是好多爱好者便自己封装相关的组件,可以使用oc来封装,也可以使用Swift来封装。...关于封装的原理,大家可以访问我的书的《React Native移动开发实战》。 基础 学习本章知识,需要读者具备一定的OC和Swift语言基础,读者可以从下面的链接中获取学习资料。...Apple 官方引导 Xcode入门 Swift英文文档 UIKit UIKit框架是iPhone应用程序开发中最基本的框架,也是用得最多、最重要的框架,UIKit包含界面相关操作组件集合,读者可以从官方文档中去学习具体的内容...testing end end 退出编辑模式后执行命令进行安装,命令如下: pod install OC Swift 混编 众所周知RN是用OC编写的,那如何才能是用Swift来编写RN的组件呢
React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。...安装方法 npm i react-native-image-zoom-viewer--save 使用示例 const images = [ { url: 'https://avatars2....v=3&s=460', width: Dimensions.get('window').width, height: Dimensions.get('window...组件地址 https://github.com/ascoders/react-native-image-viewer
这次介绍的这个React Native日历日程组件名叫react-native-calendars,是纯JS开发,可以适配IOS和安卓双平台。...下面我们来看看这个组件的使用方法。 安装 npm install --save react-native-calendars 因为是纯JS的,所以不需要link,执行完就可以了。...使用 react-native-calendars主要包含三种子组件,分别是 Calendar(日历), CalendarList(日历列表), Agenda(日程),可以根据实际需要选择使用。...agendaTodayColor: 'red', agendaKnobColor: 'blue' }} // agenda container style style={{}} /> 说明 react-native-calendars...组件的GitHub 地址:https://github.com/wix/react-native-calendars,更多的配置和使用方法请点击查看原文查看GitHub上的文档以及示例代码。
React Native 文档查看组件:react-native-doc-viewer,可以在手机上直接打开文档,支持远程和本地文档。...安装方法 npm install react-native-doc-viewer --save react-native link react-native-doc-viewer API说明 openDoc...from 'react-native-doc-viewer'; var RNFS = require('react-native-fs'); var SavePath = Platform.OS ==...示例源码 GitHub - forrest23/ReactNativeComponents: React Native组件大全 微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。...组件地址 GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls
不管在Android还是ios开发中,系统都有Button组件,而在早期的React Native中,系统是不提供Button组件的,一般会使用一个叫做react-native-button的库。...Button组件 Button组件其实就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封装。...accessibilityLabel是用于盲文的,读屏器软件可能会读取这一内容( colorios表示字体的颜色,android表示背景的颜色 disabled是否可用,如果为true,禁用此组件的所有交互...import React, {Component} from 'react'; import { StyleSheet, View, Button..., ToastAndroid, } from 'react-native'; export default class ButtonDemo extends Component
这次介绍的React Native手势密码组件为react-native-gesture-password,纯JavaScript实现,同时支持iOS和安卓平台。 效果图 ?...安装 npm install react-native-gesture-password--save 属性 所有的属性都是可选的。现在列举几个重要属性。...示例 var React = require('react'); var { AppRegistry, } = require('react-native'); var PasswordGesture...= require('react-native-gesture-password'); var Password1 = ''; var AppDemo = React.createClass({...详细说明和示例代码请查看GitHub:https://github.com/Spikef/react-native-gesture-password。
SafeAreaView简介 ReactNative官方从0.50.1版本开始,加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone
创建工程 $ npx react-native init MyReactNativeApp 安装WebView组件 $ cd MyReactNativeApp $ npm install react-native-webview...' import { WebView } from 'react-native-webview'; export default function index() { return ( <...: 'https://cn.bing.com' }} style={{ marginTop: 20, }} /> ) } 修改 App.tsx 文件,添加 MyWebView 组件的使用...: import React from 'react'; import { SafeAreaView, View, StyleSheet } from 'react-native'; import MyWebView...StyleSheet.create({ container: { flex: 1, backgroundColor: '#ffffff', } }) export default App 运行 $ npx react-native
React Native(简称RN)列表是基于ScrollView实现的,也就是可以滚动的,然而RN并没有直接使用IOS或Android的原生列表组件,这是因为RN真正调用native代码的过程是异步的...,二Native的渲染要求必须同步渲染的。...在早期版本中,对于列表情况RN采用的是ListView组件,和Android一样,早期的ListView组件性能是非常的差的,在后来的版本中,RN提供了系列用于提高列表组件性能的组件:FlatList和...读者可以在项目的“node_modules/react-native/Libraries/Lists/XXX”文件夹下找到相关的源码。
在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些原生的属性,我们需要调用原生代码来实现,或者是我们需要复用一些原来的...import { NativeModules } from 'react-native'; // 这里的MyNativeModule必须对应 // public String getName()中返回的字符串...Native的跨语言访问是异步进行的,所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。...它提供了一个函数来把返回值传回给JS。...DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit(TestEvent, params); } 在JS中调用的代码如下: import { DeviceEventEmitter } from 'react-native
领取专属 10元无门槛券
手把手带您无忧上云