技术标签: # React Native 前端 reactnative javascript
React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件,而是基于 React,React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库,因此会有更丰富的 UI 体验效果,同时也能够很好地调用底层框架的UI使用。
React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求
原生 iOS 使用 UIImage
来显示一张图片,原生 Android 开发使用 ImageView
来显示图片。
React Native 对 UIImage
和 ImageView
进行封装,提供了 Image 组件用来显示图片。
Image 组件还同时解决了访问网络图片复杂的问题,把显示网络图片给简化了。
React Native 内建了图片组件 Image 来显示图片,这个组件既可以显示本地图片,也可以显示网络图片,还可以显示 base64 格式的图片。
使用 Image 组件首先需要引入此组件,引入组件语法和引入其它组件的语法相同
import {
Image } from 'react-native'
Image 组件的基本使用语法如下
<Image
style = {
image_style}
source = {
image_url}
resizeMode = {
"cover"|"contain"|"stretch"|"repeat"|"center"}
/>
Image 组件既可以显示本地图片也可以显示网络图片,但它们的语法格式有点不同。
显示本地图片的语法格式为
<Image
style = {
image_style}
source = {
require('./image_path')}
resizeMode = {
"cover"|"contain"|"stretch"|"repeat"|"center"}
/>
显示网络图片的语法格式为
<Image
style = {
image_style}
source={
{
uri: 'image_url'}
resizeMode = {
"cover"|"contain"|"stretch"|"repeat"|"center"}
/>
显示 base64 格式的图片的语法格式为
<Image
style = {
image_style}
source={
{
uri: 'uri: data:image/png;base64,[image_base64_data]'}
resizeMode = {
"cover"|"contain"|"stretch"|"repeat"|"center"}
/>
注意: 显示网络图片和显示 base64 格式的图片,
style
样式中一定要包含width
和height
属性。
显示本地图片
<Image
source={
require('/react-native/img/favicon.png')}
/>
显示网络图片
<Image
style={
{
width: 50, height: 50}}
source={
{
uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
显示 base64 格式图片
<Image
style={
{
width: 66, height: 58}}
source={
{
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
Image 组件有很多属性,但常用的且跨平台的属性真心不多,我们列举几个常用的介绍下。
style
属性。
除了默认的跟 相同的属性外,
中的 style
属性还支持一下属性
属性 | 类型 | 说明 |
---|---|---|
borderTopRightRadius | number | 设置右上角的圆角度数,默认值为 0 |
borderBottomLeftRadius | number | 设置左下角的圆角度数,默认值为 0 |
borderBottomRightRadius | number | 设置右下角的圆角度数,默认值为 0 |
borderTopLeftRadius | number | 设置左上角的圆角度数,默认值为 0 |
borderRadius | number | 统一设置四个角的圆角度数,默认值为 0 |
borderColor | color | 设置边框的颜色 |
borderWidth | number | 设置边框的宽度,默认值为 0 |
backgroundColor | color | 设置图片组件的背景色 |
opacity | number | 设置图片组件的透明度 |
overflow | string | 当组件超出屏幕宽高时是否可见, ‘visible’ 显示, ‘hidden’ 隐藏 |
backfaceVisibility | string | 定义当组件不面向屏幕时是否可见, ‘visible’ 显示, ‘hidden’ 隐藏 |
tintColor | color | 将所有非透明的图片像素改为此颜色 |
resizeMode | string | 设置图片如何适应图片容器,可选的值有: ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’ |
source
属性。
source
属性用于设置图片的地址,图片地址可以是本地图片,网络图片和 base64 格式的图片。
使用方式我们上面已经介绍过了。
loadingIndicatorSource
属性。
loadingIndicatorSource
属性用于加载网络图片时的 placeholder 图片。也可以说是图片加载指示器。
它的使用格式和 source
属性一样,但不能是网络图片,只能是本地图片或 base64 格式图片。
resizeMethod
属性。
resizeMethod
属性用于设置图片如何适配图片组件。默认值为 auto
。
可选的值有: ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’。
值 | 说明 |
---|---|
auto | 由系统自己在 resize 或 scale 之间选择 |
resize | 显示之前先进行重新调整大小,当图片超出组件太多的时间建议使用此值 |
scale | 缩放图片,当地图片比组件小或者图片和组件差不多大小时使用此值 |
下面的代码,我们使用 Image 组件分别显示本地图片、网络图片和 base64 图片。
你需要将下面的图片下载到项目的根目录下
import React, {
Component } from 'react';
import {
AppRegistry, View, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Image
source={
require('./img1.jpg')}
/>
<Image
style={
{
margin:10,width: 177, height: 100}}
source={
{
uri: 'https://www.twle.cn/static/i/img1.jpg'}}
/>
<Image
style={
{
margin:10,width: 66, height: 58}}
source={
{
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
</View>
);
}
}
显示效果如下
文章浏览阅读7.4k次,点赞4次,收藏7次。问题描述:bootstrap引入VUE+elementUI项目里,由于bootstrap的全局性,全局的样式就被修改。el-upload这个组件里,控制上传文件类型的功能是用input元素完成的,element-UI默认将input屏蔽掉,不显示到页面中。但是引入了bootstrap就会将input的样式显示出来。造成的后果如图:为了解决这个问题:可以在当前页面中写入全局的样式,代码如下:..._boostrap 与 electron 冲突
文章浏览阅读2.2k次。第一次发博客 不喜勿喷项目有一个需求,显示文字的时候,如果字数超过两行,则显示省略号,然后在后面显示标红的“更多”(如下图所示) 我打算用混合文本SpannableString去完成,这样的话就得知道textview的每行要显示多少个字。然而不同的手机屏幕分辨率显示字数会有所不同,我的做法如下:首先获取到目标TextView的宽度,如果TextView的宽度是match_parent,那么就是屏幕..._android根据手机屏幕宽度判断每行显示字数
文章浏览阅读1.4k次,点赞2次,收藏4次。Unity AssetBundle 之 (进阶)简单的实现 AssetBundle 资源下载,资源包的资源加载与释放管理等操作的方法目录Unity AssetBundle 之 (进阶)简单的实现 AssetBundle 资源下载,资源包的资源加载与释放管理等操作的方法一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤六、关键代码一、简单介绍Unity中的一些基础知识点。本节介绍,Asset Bundle 在 Unity中的使用..._unity bundle进阶
文章浏览阅读1.5k次。cat > /etc/yum.repos.d/nginx.repo <
文章浏览阅读359次。推荐阅读:面经蚂蚁金服(交叉面),已拿offer,Java岗定级阿里P6实战文档:彻底搞懂SpringBoot+微服务+Nginx+Docker等Dataway介绍Dataway 是基于 DataQL 服务聚合能力,为应用提供的一个接口配置工具。使得使用者无需开发任何代码就配置一个满足需求的接口。整个接口配置、测试、冒烟、发布。一站式都通过 Dataway 提供的 UI 界面完成。UI 会以 Jar 包方式提供并集成到应用中并和应用共享同一个 http 端口,应用无需单独为 Dataway_springboot dataway
文章浏览阅读6.2k次,点赞2次,收藏14次。称为PCM(pulse code modulation),即脉冲编码调制。 数字信号是对连续变化的模拟信号进行抽样,量化和编码产生的,这种电的数字信号称为数字基带信号,由PCM电端机产生。 简单说就是模/数转换。模拟信号经过抽样和量化以后,可以得到一系列输出,它们共有Q个电平状态。当Q比较大时,如果直接传输Q进制的信号,其抗噪声性能将会是很差的,因此,通常在发射端通过编码器把Q进制信号变换..._生成二进制的代码是脉冲信号吗
文章浏览阅读4.6k次,点赞2次,收藏34次。我的目的就是将matlab中代码还原成opencv中的代码了该方法的主要原理是:在图像中的每一行求得最大值,然后减去一个阈值。 在循环判断每一行中大于刚才减去的值。 在用灰度重心法提取;#include <opencv2/ope..._灰度重心法提取中心线matlab
文章浏览阅读363次。接口与监听器从一个很简单的ui界面来写解释接与监听器接口机制从一个很简单的ui界面来写解释接与监听器接口机制这次不抄概念了简单的说java不支持多类继承 很麻烦 所以有了接口这个功能.我定义一个接口,给接口放入一些归属于这个接口的功能.然后在类中通过一些定义这个接口 来实现我想实现的功能举个例子:interface Animal { public void eat(); public void travel();}public class MammalInt impleme_接口监听
文章浏览阅读55次。最近接到用户的订单,里面要求用缩略图插件,于是用到了sf的SF的缩略图插件,再一想用上后,图片地址是一个动态地址,并不友好。所以看看插件后台,发现有一则nginx的伪静态规则,放在阿帕奇服务器上也用不上啊。。于是乎手写一个试试,方法如下:1.打开.htaccess文件(网站根目录下的该文件,用FTP工具打开修改):把这句:RewriteRule^sf_img1/(.*)-(.*)-(.*)-(....
文章浏览阅读371次。#include #include #include using namespace std;#define N 520#define inf 0x3f3f3f3fint n, m, a[N], b[N];int dp[N][N];int main() { scanf("%d%d", &n, &m); for(int i = 1; i <= n; ++i) { _icpc camp2016 day1 f
文章浏览阅读68次。题目:阅读《大型网站技术架构:核心原理与案例分析》第五、六、七章,结合《XXX需求征集系统》,分析如何增加相应的功能,提高系统的可用性和易用性,撰写一篇1500字左右的博客阐述你的观点 在这一节课上,我们学习了系统质量属性其中的可用性和易用性。那么质量属性是什么呢,质量属性是高于对系统功能(即对系统能力、服务和行为)的基本的要求的。系统质量属性讲重点放在了可用性、可修改性、性能、..._大型网站技术 选择题
文章浏览阅读1.5k次。查询存储过程的名字、所属数据库、类型:select name, db, type from mysql.proc where name = 'add_user';查询存储过程内容:select body from mysql.proc where name = 'add_user';目前mysql的存储过程内容无法修改,只能删掉重建。查询受影响行数:select row_mysql 设置自动提交后,无法记录影响了多少行