在expo下使用react-native-fast-image组件 import FastImage from 'react-native-fast-image' const Imagegallery...FastImage.resizeMode.contain} /> ) 在IOS下运行会报错:requireNativeComponent: "FastImageView" was not found in the UIManager in react...native 报错的原因是react-native-fast-image组件依赖的原生组件并没有包含在react-native里,使用前需要进行预构建。...解决方案: 执行下面的命令,预构建ios pod原生代码: npx expo prebuild -p ios --clean 也可以不用后面的参数,直接prebuild,将安卓的原生代码库也一起安装上...npx expo prebuild 然后启动expo代码 npx expo run:ios 经过漫长的等待,应该就能正常运行了。
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...请不要吝啬你们的Star! 组件地址 https://github.com/sussol/react-native-data-table
作者:何方舟 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。...但是由于 React 的数据流向是单向的, 子组件的数据和方法只能由父级组件赋予,一旦组件嵌套层次变深,传递数据将会变得非常复杂。...原始的 React 架构 加入了 Redux 的架构之后的 所有数据都存放在 store 中,组件内部不维护任何数据。...通过 redux 框架提供的 connect 高阶函数, 直接从 store 选取需要的数据和申明需要使用的方法传入组件中,这些申明的方法是组件事件具体的逻辑的实现,例如发送请求,上报逻辑等等,所以通常调用...在 React 作为 UI 组件库的基础上,以 redux 作为状态管理框架,我们定义了4种类型的组件。 展示组件 React 组件即为我们的展示组件。
本文作者:IMWeb 何方舟 原文出处:IMWeb社区 未经同意,禁止转载 React + Redux 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。...但是由于 React 的数据流向是单向的, 子组件的数据和方法只能由父级组件赋予,一旦组件嵌套层次变深,传递数据将会变得非常复杂。...原始的 React 架构 加入了 Redux 的架构之后的 所有数据都存放在 store 中,组件内部不维护任何数据。...通过 redux 框架提供的 connect 高阶函数, 直接从 store 选取需要的数据和申明需要使用的方法传入组件中,这些申明的方法是组件事件具体的逻辑的实现,例如发送请求,上报逻辑等等,所以通常调用...在 React 作为 UI 组件库的基础上,以 redux 作为状态管理框架,我们定义了4种类型的组件。 展示组件 React 组件即为我们的展示组件。
React + Redux 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。...但是由于 React 的数据流向是单向的, 子组件的数据和方法只能由父级组件赋予,一旦组件嵌套层次变深,传递数据将会变得非常复杂。...redux 框架解决了这个问题,简单来说,它将 react 由父级传递数据,变为了由一个统一的数据源 store 单向地向各个组件传递数据。 原始的 React 架构 ?...通过 redux 框架提供的 connect 高阶函数, 直接从 store 选取需要的数据和申明需要使用的方法传入组件中,这些申明的方法是组件事件具体的逻辑的实现,例如发送请求,上报逻辑等等,所以通常调用...在 React 作为 UI 组件库的基础上,以 redux 作为状态管理框架,我们定义了4种类型的组件。 展示组件 React 组件即为我们的展示组件。
最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家。...2.其中有部分样式是在默认样式基础上经过修饰的,同时不能确定这是否是RN最新版本的呈现方式,但是万变不离其宗,一般来说形态不会发生很大的变化 FlatList和SectionList 和一般化用途的ScrollView...不同,下面的列表组件只会渲染当前屏幕可见的元素,这样有利于显示大量的数据。...Modal 一种简单的覆盖全屏的模态视图。 RefreshControl 此组件用在ScrollView及其衍生组件的内部,用于添加下拉刷新的功能。...StatusBar 用于控制应用顶部状态栏样式的组件。
前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。...1.概述 View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。...View组件是一个支持Flexbox布局、样式、一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件。...2.1 Flexbox View组件的Flexbox属性这里就不再介绍了,详细请看React Native探索(四)Flexbox布局详解这一篇文章。...很明显,elevation的效果远远不及shadow,这时我们可以采用第三方库react-native-shadow。
前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。...Text组件的内部使用的并不是flexbox布局,而是文本布局,因此想要使用flexbox设置文字居中是不可能的,解决方案就是在Text组件的外层套一层View,设置View的flexbox,具体的参考...2 Style属性 Text组件支持View组件的所有的Style属性,不了解View组件的Style属性可以查看React Native组件(二)View组件解析这篇文章。...第二行和第三行做对比,可以明显看出第三行是斜体字并且字体更细一些。 2.2 阴影相关 Style属性 ? 改写2.1小节的例子中styles的代码,如下所示。 ? 运行效果如下图所示。 ?...,需要注意的是,它必须和numberOfLines(文本显示的行数)搭配使用,才会发挥作用。
1、什么是Image组件 这里的Image并不是iOS中的UIImage,而相当于UIImageView组件。...通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源。...常见有如下加载方式: 从项目里加载 从APP中加载 加载网络图片 2、Image组件的基本用法 2.1 从当前项目中加载图片 首先先看一下图片的位置: ?...2.2 APP项目加载资源(iOS 是放在Asset里) 还是先看下目录文件: ?...contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
enablesReturnKeyAutomatically 布尔型 如果值为真,当没有文本的时候键盘是不能返回键值的,当有文本的时候会自动返回。默认值为假。...授之以鱼不如授之以渔 组件篇的文章也写了三篇了,大家也知道了学习控件基本上就是学习他的属性及应用,那么我们去哪找控件的属性呢? ...import { AppRegistry, StyleSheet, View, Text, TextInput, } from 'react-native'; 大家从这里可以看出来...,TextInput在react-native 里面,那我们去找一下,看看可以找到不。...不只这一个控件,我们学过的和没有学习的控件都可以在这里找到,大家慢慢的试试新组件吧。
1、什么是Text 在iOS中很多组件都有显示文字的功能,一般文字都是写在Label上。...在ReactNative中类似Label显示文字的组件叫什么呢,也就是我们今天要学的这个Text组件。...默认情况下,文本被按下时会有一个灰色的、椭圆形的高光 selectable:决定用户是否可以长按选择文本,以便复制和粘贴 2、Text组件常用的属性应用Demo Demo代码如下: import React..., { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-native...总结: 在嵌套的Text组件中,子Text组件将继承它的父Text组件的样式,当使用嵌套的Text组件时,子Text组件不能覆盖从父Text组件继承而来的样式,只能增加父Text组件没有指定的样式。
1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法...TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。...2.2 onChange 当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码: ?...运行程序并在App的开发菜单中选择Debug JS Remotely,这时我们输入Android并按下提交键,在Console控制台中就会输出结果。(笔者用的是WebStorm) ?...3 方法 clear() clear用于清空输入框的内容。 想要使用组件的方法则需要使用组件的引用,例子如下所示。 ?
文章目录 React 路由 前端路由 React Router 基于 Web 的 React Router react-router-dom 的核心组件 Router组件 Route 组件 exact...这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由,其本质上与后端路由的思想是一样的。...React Router React项目中使用的 React Router 库 React Router 提供了多种不同环境下的路由库 Web native 基于 Web 的 React...react-router-dom 的核心组件 Router组件 如果我们希望页面中某个部分的内容需要根据 URL 来动态显示,需要用到 Router 组件 ,该组件是一个容器组件,只需要用它包裹 URL...to 设置跳转的 URL. withRouter 组件 如果一个组件不是路由绑定组件,那么该组件的 props 中是没有路由相关对象的,虽然我们可以通过传参的方式传入,但是如果结构复杂,这样做会特别的繁琐
静态图片资源 从0.14版本开始,React Native提供了一个统一的方式来管理iOS和Android应用中的图片。.../my-icon.png')} /> 图片文件的查找会和JS模块的查找方式一样。在上面的这个例子里,是哪个组件引用了这个图片,Packager就会去这个组件所在的文件夹下查找my-icon.png。...如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。 注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串。...不过网上提供了第三方的组件react-native-image-picker,这个组件同时支持photo和video,也就是照片和视频都可以用。...我们使用npm安装这个组件: npm install --save react-native-image-picker 典型使用方法 import ImagePickerManager from 'NativeModules
React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View...安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen()...如果是ScrollView,那么未显示的部分是不会被截取的。...如果是ScrollView组件,就会截取整个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包含界面相关操作组件集合,读者可以从官方文档中去学习具体的内容...OC编写的,那如何才能是用Swift来编写RN的组件呢,答案就是IOS原生就支持OC和Swift混编应用。...这个文件主要的功能是将OC的文件接口放在一起然后供Swift文件调用,红圈标注出来的意思是如果你想自己手动创建一个bridge文件也是可以的,但是需要做相应的配置。
一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似...React Native 开发中,由于使用的是与前端相同的 JavaScript 语言,衔接 Echarts 的工作相对顺畅些,不过一些必要的组件封装还是能够大大提高开发效率的。...Echarts与React Native组件的通信 在 React Native 的 WebView 组件中,提供了 onMessage 和 postMessage 来进行 html 与组件的双向通信,...React Native 组件的通信。...因为平台判断是运行时进行的,哪怕分开设置 index.anroid.js 和 index.ios.js 打包时也会都打包进去,而 Android 中又必须手动添加 assets。
不管在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
SafeAreaView简介 ReactNative官方从0.50.1版本开始,加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone...X的页面适配提供了很大的方便。...SafeAreaView的使用也非常简单,只需要将SafeAreaView嵌套在最根级别的视图中即可,并且在style中加上flex:1等页面样式。
这次介绍的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。
领取专属 10元无门槛券
手把手带您无忧上云