3d图像展示 react-native

2016-11-25 14:08:26 tiem_erhu 阅读数 4718

一:基础:
ART:暴露了七个组件:
● Surface - 一个矩形可渲染的区域,是其他元素的容器!
● Group - 可容纳多个形状、文本和其他的分组
● Shape - 形状定义,可填充
● Text - 文本形状定义
props
● Surface
○ width : 渲染区域的宽
○ height : 定义渲染区域的高
● Shape
○ d : 定义绘制路径
○ stroke : 描边颜色
○ strokeWidth : 描边宽度
○ strokeDash : 定义虚线
○ fill : 填充颜色
● Text
○ funt : 字体样式,定义字体、大小、是否加粗 如: bold 35px Heiti SC
● Path
○ moveTo(x,y) : 移动到坐标(x,y)
○ lineTo(x,y) : 连线到(x,y)
○ arc() : 绘制弧线
○ close() : 封闭空间

二:实例
● 绘制直线:

import  React,{Component} from 'react';
import  {
 ART,
 View,
 StyleSheet,
} from 'react-native';

var {
  Surface,
  Group,
  Shape,
  Path
} = ART;

export default class  Note extends Component{
    render(){
         const path = Path()
            .moveTo(1,1)//移动起始点
            .lineTo(300,1);//绘制结束后的坐标点
        return(
            <View style={styles.container}>
                <Surface width={300} height={2}>
                    <Shape d={path} stroke="#000000" strokeWidth={1} />
                </Surface>
            </View>
        )
    }

}

var styles = StyleSheet.create({
  container: {
    paddingTop: 20,
  }
});
  注意Surface的宽高,就是视图能绘制的宽高

● 绘制虚线:

export default class  Note extends Component{
    render(){
         const path = Path()
            .moveTo(1,1)//移动起始点
            .lineTo(300,1);//绘制结束后的坐标点
        return(
           <View style={styles.container}>
                <Surface width={300} height={2}>
                    <Shape d={path} stroke="#000000" strokeWidth={2} strokeDash={[10,50]}/>
                </Surface>
            </View>
        )
    }

}
注意:strokeDash={[10,50]}表示:先绘制10像素的实线然后绘制50像素的虚线!

● 绘制矩形:

export default class  Note extends Component{
    render(){
         const path = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();
        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                  <Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
                </Surface>
            </View>
        )
    }

}

注意:close的意思是创建一个密闭的路径,首先通过linrTo绘制三条边,然后使用close链接第四条边。使用fill设置里面的填充色。

● 绘制圆形:

export default class  Note extends Component{
    render(){
         const path = new Path()
            .moveTo(50,1)
            .arc(0,99,25)
            .arc(0,-99,25)
            .close();

        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                 <Shape d={path} stroke="#000000" strokeWidth={1}/>
                </Surface>
            </View>
        )
    }

}
  注意:acr(x,y,radius)终点坐标距离起始点的相对距离

● 绘制字体:

export default class  Note extends Component{
    render(){
        const   path=new Path()
        .moveTo(40,40)
        .lineTo(99,10);

        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                   <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={path} >Swipe</Text>
                </Surface>
            </View>
        )
    }

}

注意:font的使用

● 绘制扇形:

const {Surface} = ART;
import Wedge from './Wedge'

export default class  Note extends Component{
    render(){
        const  path=new Path()
        .moveTo(40,40)
        .lineTo(99,10);

        return(
           <View style={styles.container}>
                 <Surface width={100} height={100}>
                    <Wedge
                     outerRadius={50}
                     startAngle={0}
                     endAngle={60}
                     originX={50}
                     originY={50}
                     fill="blue"/>

                </Surface>
            </View>
        )
    }

}
   注意:使用了一个React.art封装的一个组件Wedge;

● 图层叠加:

const {Surface, Shape,Text, Path,Group} = ART;
export default class  Note extends Component{
    render(){

        const pathRect = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();

        const pathCircle = new Path()
            .moveTo(50,1)
            .arc(0,99,25)
            .arc(0,-99,25)
            .close();

        const pathText = new Path()
            .moveTo(40,5)
            .lineTo(40,99);


        return(
            <View style={styles.container}>
                <Surface width={100} height={100}>
                    <Group>
                        <Shape d={pathRect} stroke="#000000" fill="#000000" strokeWidth={1}/>
                        <Shape d={pathCircle} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1}/>
                        <Text strokeWidth={1} strokeDash={[2,1,2,1]} stroke="#000" font="bold 30px Heiti SC" path={pathText} >Swipe</Text>
                    </Group>
                </Surface>
            </View>
        )
    }

}

注意:图层叠加,上一层的会覆盖下一层的,类似于安卓的帧布局!

三:高级例子:
效果图:

这里写图片描述

import React ,{
    Component
}from 'react';
import {
  ART as Art,
  StyleSheet,
  View,
  Dimensions,
  TouchableWithoutFeedback,
  Animated
} from 'react-native';

var HEART_SVG = "M130.4-0.8c25.4 0 46 20.6 46 46.1 0 13.1-5.5 24.9-14.2 33.3L88 153.6 12.5 77.3c-7.9-8.3-12.8-19.6-12.8-31.9 0-25.5 20.6-46.1 46-46.2 19.1 0 35.5 11.7 42.4 28.4C94.9 11 111.3-0.8 130.4-0.8"
var HEART_COLOR = 'rgb(226,38,77,1)';
var GRAY_HEART_COLOR = "rgb(204,204,204,1)";

var FILL_COLORS = [ 
  'rgba(221,70,136,1)',
  'rgba(212,106,191,1)',
  'rgba(204,142,245,1)',
  'rgba(204,142,245,1)',
  'rgba(204,142,245,1)',
  'rgba(0,0,0,0)'
];

var PARTICLE_COLORS = [
  'rgb(158, 202, 250)',
  'rgb(161, 235, 206)',
  'rgb(208, 148, 246)',
  'rgb(244, 141, 166)',
  'rgb(234, 171, 104)',
  'rgb(170, 163, 186)'
]

 getXYParticle=(total, i, radius)=> {
  var angle = ( (2*Math.PI) / total ) * i;

  var x = Math.round((radius*2) * Math.cos(angle - (Math.PI/2)));
  var y = Math.round((radius*2) * Math.sin(angle - (Math.PI/2)));
  return {
    x: x,
    y: y,
  }
}

 getRandomInt=(min, max)=> {
  return Math.floor(Math.random() * (max - min)) + min;
}

 shuffleArray=(array)=> {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}


var {
  Surface,
  Group,
  Shape,
  Path
} = Art;

//使用Animated.createAnimatedComponent对其他组件创建对话
//创建一个灰色的新型图片
var AnimatedShape = Animated.createAnimatedComponent(Shape);

var {
  width: deviceWidth,
  height: deviceHeight
} = Dimensions.get('window');

export default  class Key extends  Component{
  constructor(props) {
    super(props);

    this.state = {
       animation: new Animated.Value(0) 
    };
  }

  explode=()=> {
    Animated.timing(this.state.animation, {
      duration: 1500,
      toValue: 28
    }).start(() => {
      this.state.animation.setValue(0);
      this.forceUpdate();
    });
  }

  getSmallExplosions=(radius, offset)=> {
    return [0,1,2,3,4,5,6].map((v, i, t) => {

      var scaleOut = this.state.animation.interpolate({
        inputRange: [0, 5.99, 6, 13.99, 14, 21],
        outputRange: [0, 0, 1, 1, 1, 0],
        extrapolate: 'clamp'
      });

      var moveUp = this.state.animation.interpolate({
        inputRange: [0, 5.99, 14],
        outputRange: [0, 0, -15],
        extrapolate: 'clamp'
      });

      var moveDown = this.state.animation.interpolate({
        inputRange: [0, 5.99, 14],
        outputRange: [0, 0, 15],
        extrapolate: 'clamp'
      });

      var color_top_particle = this.state.animation.interpolate({
        inputRange: [6, 8, 10, 12, 17, 21],
        outputRange: shuffleArray(PARTICLE_COLORS)
      })

      var color_bottom_particle = this.state.animation.interpolate({
        inputRange: [6, 8, 10, 12, 17, 21],
        outputRange: shuffleArray(PARTICLE_COLORS)
      })

      var position = getXYParticle(7, i, radius)

      return (
        <Group 
          x={position.x + offset.x } 
          y={position.y + offset.y} 
          rotation={getRandomInt(0, 40) * i}
        >
          <AnimatedCircle 
            x={moveUp}
            y={moveUp}
            radius={15} 
            scale={scaleOut} 
            fill={color_top_particle} 
          />
          <AnimatedCircle 
            x={moveDown}
            y={moveDown}
            radius={8} 
            scale={scaleOut} 
            fill={color_bottom_particle} 
          />
        </Group>
      )
    }, this)
  }
  render() {
    var heart_scale = this.state.animation.interpolate({
      inputRange: [0, .01, 6, 10, 12, 18, 28],
      outputRange: [1, 0, .1, 1, 1.2, 1, 1],
      extrapolate: 'clamp'
    });

    var heart_fill = this.state.animation.interpolate({
      inputRange: [0, 2],
      outputRange: [GRAY_HEART_COLOR, HEART_COLOR],
      extrapolate: 'clamp'
    })

    var heart_x = heart_scale.interpolate({
      inputRange: [0, 1],
      outputRange: [90, 0],
    })

    var heart_y = heart_scale.interpolate({
      inputRange: [0, 1],
      outputRange: [75, 0],
    })

    var circle_scale = this.state.animation.interpolate({
      inputRange: [0, 1, 4],
      outputRange: [0, .3, 1],
      extrapolate: 'clamp'
    });

    var circle_stroke_width = this.state.animation.interpolate({
      inputRange: [0, 5.99, 6, 7, 10],
      outputRange: [0, 0, 15, 8, 0],
      extrapolate: 'clamp'
    });

    var circle_fill_colors = this.state.animation.interpolate({
      inputRange: [1, 2, 3, 4, 4.99, 5],
      outputRange: FILL_COLORS,
      extrapolate: 'clamp'
    })

    var circle_opacity = this.state.animation.interpolate({
      inputRange: [1,9.99, 10],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp'
    })


    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={this.explode} style={styles.container}> 
          <View style={{transform: [{scale: .8}]}}>
            <Surface width={deviceWidth} height={deviceHeight}>
              <Group x={75} y={200}>
             //是一个心形的图像
                <AnimatedShape
                  d={HEART_SVG}
                  x={heart_x}
                  y={heart_y}
                  scale={heart_scale}
                  fill={heart_fill}
                />
                <AnimatedCircle
                  x={89}
                  y={75}
                  radius={150}
                  scale={circle_scale}
                  strokeWidth={circle_stroke_width}
                  stroke={FILL_COLORS[2]}
                  fill={circle_fill_colors}
                  opacity={circle_opacity}
                />

                {this.getSmallExplosions(75, {x:89, y:75})}
              </Group>
            </Surface>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
};

class  AnimatedCircle  extends  Component{
  render(){
     var radius = this.props.radius;
    var path = Path().moveTo(0, -radius)
        .arc(0, radius * 2, radius)
        .arc(0, radius * -2, radius)
        .close();
    return  React.createElement(AnimatedShape, React.__spread({},  this.props, {d: path}));
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

2019-06-06 10:33:54 lqyygyss 阅读数 851

布局

React-Native的布局是完全是用flex来实现。

flex的用法就不多说了,具体可参考阮一峰老师的这篇文章《flex布局:语法篇》,里面对flex的讲解非常详细;

需要注意的是:React-Native中的flex的相关属性不是完全依照w3c规范提供的各种值,对其中的某些属性值进行了阉割。

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致。

下面就借用《React-Native样式指南》中内容说明一下:

目录

Properties 属性


Text 文本(18)

属性名 取值 描述
color <color> 对应 CSS color 属性
fontFamily string 对应 CSS font-family 属性
fontSize <number> 对应 CSS font-size 属性
fontStyle normal, italic 对应 CSS font-style 属性,但阉割了 oblique 取值
fontWeight normal, bold 100~900 对应 CSS font-weight 属性,但阉割了 bolder, lighter 取值
lineHeight <number> 对应 CSS line-height 属性
textAlign auto, left, right, center, justifyiOS 对应 CSS text-align 属性,但增加了 auto 取值。当取值为 justify 时,在 Android 上会变为 left
textDecorationLine none, underline, line-through, underline line-through 对应 CSS text-decoration-line 属性,但阉割了 overline, blink 取值
textShadowColor <color> 对应 CSS text-shadow 属性中的颜色定义
textShadowOffset {
width:<number>,
height:<number>
}
对应 CSS text-shadow 属性中的阴影偏移定义
textShadowRadius <number> CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
includeFontPadding<br />Android <bool> Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false
textAlignVertical<br />Android auto, top, bottom, center 对应 CSS vertical-align 属性,增加了 auto 取值,center 取代了 middle,并阉割了 baseline, sub 等值
fontVariant<br />iOS small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums 对应 CSS font-variant 属性,但取值更丰富
letterSpacing<br />iOS <number> 对应 CSS letter-spacing 属性
textDecorationColor<br />iOS <color> 对应 CSS text-decoration-color 属性
textDecorationStyle<br />iOS solid, double, dotted, dashed 对应 CSS text-decoration-style 属性,但阉割了 wavy 取值
writingDirection<br />iOS auto, ltr, rtl 对应 CSS direction 属性,增加了 auto 取值

<a name="dimension"></a>

Dimension 尺寸(6)

属性名 取值 描述
width <number> 对应 CSS width 属性
minWidth <number> 对应 CSS min-width 属性
maxWidth <number> 对应 CSS max-width 属性
height <number> 对应 CSS height 属性
minHeight <number> 对应 CSS min-height 属性
maxHeight <number> 对应 CSS max-height 属性

<a name="positioning"></a>

Positioning 定位(6)

属性名 取值 描述
position absolute, relative 对应 CSS position 属性,但阉割了 static, fixed 取值
top <number> 对应 CSS top 属性
right <number> 对应 CSS right 属性
bottom <number> 对应 CSS bottom 属性
left <number> 对应 CSS left 属性
zIndex <number> 对应 CSS z-index 属性

Margin 外部白(7)

属性名 取值 描述
margin <number> 对应 CSS margin 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的外补白,可以通过下面的单向外部白属性
marginHorizontal <number> 无对应的 CSS 属性。其效果相当于同时设置 marginRightmarginLeft
marginVertical <number> 无对应的 CSS 属性。其效果相当于同时设置 marginTopmarginBottom
marginTop <number> 对应 CSS margin-top 属性
marginRight <number> 对应 CSS margin-right 属性
marginBottom <number> 对应 CSS margin-bottom 属性
marginLeft <number> 对应 CSS margin-left 属性

Padding 内部白(7)

属性名 取值 描述
padding <number> 对应 CSS padding 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的内补白,可以通过下面的单向内部白属性
paddingHorizontal <number> 无对应的 CSS 属性。其效果相当于同时设置 paddingRightpaddingLeft
paddingVertical <number> 无对应的 CSS 属性。其效果相当于同时设置 paddingToppaddingBottom
paddingTop <number> 对应 CSS padding-top 属性
paddingRight <number> 对应 CSS padding-right 属性
paddingBottom <number> 对应 CSS padding-bottom 属性
paddingLeft <number> 对应 CSS padding-left 属性

Border 边框(20)

属性名 取值 描述
borderStyle solid, dotted, dashed 对应 CSS border-style 属性,但阉割了 none, hidden, double, groove, ridge, inset, outset 取值,且无方向分拆属性
borderWidth <number> 对应 CSS border-width 属性
borderTopWidth <number> 对应 CSS border-top-width 属性
borderRightWidth <number> 对应 CSS border-right-width 属性
borderBottomWidth <number> 对应 CSS border-bottom-width 属性
borderLeftWidth <number> 对应 CSS border-left-width 属性
borderColor <color> 对应 CSS border-color 属性
borderTopColor <color> 对应 CSS border-top-color 属性
borderRightColor <color> 对应 CSS border-right-color 属性
borderBottomColor <color> 对应 CSS border-bottom-color 属性
borderLeftColor <color> 对应 CSS border-left-color 属性
borderRadius <number> 对应 CSS border-radius 属性
borderTopLeftRadius <number> 对应 CSS border-top-left-radius 属性
borderTopRightRadius <number> 对应 CSS border-top-right-radius 属性
borderBottomLeftRadius <number> 对应 CSS border-bottom-left-radius 属性
borderBottomRightRadius <number> 对应 CSS border-bottom-right-radius 属性
shadowColor <color> 对应 CSS box-shadow 属性中的颜色定义
shadowOffset {
width: <number>,
height: <number>
}
对应 CSS box-shadow 属性中的阴影偏移定义
shadowRadius <number> CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
shadowOpacity <number> 对应 CSS box-shadow 属性中的阴影透明度定义

<a name="background"></a>

Background 背景(1)

属性名 取值 描述
backgroundColor <color> 对应 CSS background-color 属性

<a name="transform"></a>

Transform 转换(3)

属性名 取值 描述
transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] 对应 CSS transform 属性
transformMatrix TransformMatrixPropType 类似于 CSStransform 属性的 matrix()matrix3d() 函数
backfaceVisibility visible, hidden 对应 CSS backface-visibility 属性

<a name="flexbox"></a>

Flexbox 弹性盒(9)

属性名 取值 描述
flex <number> 对应 CSS flex 属性,但只能为整数值
flexGrow <number> 对应 CSS flex-grow 属性
flexShrink <number> 对应 CSS flex-shrink 属性
flexBasis <number> 对应 CSS flex-basis 属性
flexDirection row, row-reverse, column, column-reverse 对应 CSS flex-direction 属性
flexWrap wrap, nowrap 对应 CSS flex-wrap 属性,但阉割了 wrap-reverse 取值
justifyContent flex-start, flex-end, center, space-between, space-around 对应 CSS justify-content 属性,但阉割了 stretch 取值。
alignItems flex-start, flex-end, center, stretch 对应 CSS align-items 属性,但阉割了 baseline 取值。
alignSelf auto, flex-start, flex-end, center, stretch 对应 CSS align-self 属性,但阉割了 baseline 取值

<a name="other"></a>

Other 其他

属性名 取值 描述
opacity <number> 对应 CSS opacity 属性
overflow visible, hidden, scroll 对应 CSS overflow 属性,但阉割了 auto 取值
elevation<br />Android <number> CSS中没有对应的属性,只在 Android5.0+ 上有效
resizeMode cover, contain, stretch CSS中没有对应的属性,可以参考 background-size 属性
overlayColor<br />Android string CSS中没有对应的属性,当图像有圆角时,将角落都充满一种颜色
tintColor<br />iOS <color> CSS中没有对应的属性,iOS 图像上特殊的色彩,改变不透明像素的颜色

<a name="values"></a>

Valuse 取值

<a name="color"></a>

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型:

  • #f00 (#rgb)
  • #f00c (#rgba):CSS 中无对应的值
  • #ff0000 (#rrggbb)
  • #ff0000cc (#rrggbbaa):CSS 中无对应的值
  • rgb(255, 0, 0)
  • rgba(255, 0, 0, 0.9)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 0.9)
  • transparent
  • 0xff00ff00 (0xrrggbbaa):CSS 中无对应的值
  • Color Name:支持了 基本颜色关键字拓展颜色关键字,但不支持 28个系统颜色

<a name="number"></a>

Number 数值

React-Native 中,目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位,详细请看 Units 单位 部分。

<a name="units"></a>

Units 单位

<a name="pt"></a>

Pt 点

React-Native 中,并不支持百分比单位,目前只支持一种单位,即 pt 绝对长度单位,同时,你在定义时不需要加单位,例如:

<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

<a name="pixelratio"></a>

PixelRatio 像素密度

React-Native 中,访问设备像素密度的方法由 PixelRatio 类提供。

我们的应用通常都会运行在不同的设备上,并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是:

  • 定义了元素的边框为 1像素,而实际上在不同像素密度的设备上结果不一样,比如:iPhone6 显示为 2像素,iPhone6 Plus 显示为 3像素
  • 对于一个图片来讲,因为设备的像素密度不同,它也需要对应不同尺寸的规则,以防止图片过小变得模糊;

根据像素密度指定边框厚度

出于对产品体验的一致性,我们会要求不论是在哪种设备上,其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比:

var styles = StyleSheet.create({
    box: {
        borderWidth: 1 / PixelRatio.get(),
        borderStyle: solid
    }
});

上述代码将保证你的应用在所有的设备上(像素密度),都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度


作者:mlgzzz
链接:https://www.jianshu.com/p/e77d0a6468ff

2018-06-14 04:06:24 weixin_33806509 阅读数 82

欢迎来到2018年6月发布的React Native!超过53个贡献者自3月份以来共提交了768次提交 - 我们非常感谢你们每一个人。

正如你将在一秒钟内看到的那样,这个新版本有一些重要的突破性变化,需要大量的额外努力才能达到稳定的0.56。这是6月从每月发布周期中跳过的主要原因,但展望未来,我们计划每月都要推出。

强调

React Native现在使用Babel7。升级到0.56时,请确保将其升级到react-native-babel-presetv5或更新版本。如果你有使用到,请及时更新,因为Babel 7不向后兼容。

node 8现在是最低要求的版本。

iOS 9现在是最低要求的版本。任何可以运行iOS 8的设备都可以升级到iOS 9

WebView 只会默认加载http(s)网址,默认情况下会禁用geolocation。

为几个组件添加流类型。我们正在迁移PropTypes和运行时检查,而不是依靠Flow。在本发行版中,您会注意到与Flow有关的许多改进。

修复较新的Xcode版本的项目设置警告,删除不必要的控制台日志记录。

很多错误修复。

Facebook内部团队目前正在重写一些核心架构。这是一项正在进行的工作,我们并不期望在近期版本中使用它,但我们觉得有必要让你知道那些提到Fabric的提交者。

增加:新功能

babelHelpers用Babel 7支持更新- https://github.com/facebook/react-native/commit/fbd1beaf666be9c09a380784f8c0cd34ba083a6b

FlatList现在符合严格模式 - https://github.com/facebook/react-native/commit/a90d0e3614c467c33cf85bcbe65be71903d5aecc

启用?.可选的链接运算符插件 - https://github.com/facebook/react-native/commit/aa6f394c4236e5a4998c3be8ed61ec1bab950775

支持flexWrap: 'wrap-reverse'- https://github.com/facebook/react-native/commit/d69e55060fd76d91eccc45905d250a9fce4b2c49

将prop添加accessibilityTraits到Text- https://github.com/facebook/react-native/commit/654435d1ed9e584e65fff601e1fa50591e042664

为模板添加devDependencies支持 - https://github.com/facebook/react-native/commit/c4ab03a18e75e6ed55444b5d86f3ceee435b9a78

添加对springDamping的支持SpringInterpolator- https://github.com/facebook/react-native/commit/1dde989919d2c272ca7fcaa5c4b2d9ee02c490a0

Flow类型SegmentedControlIOS- https://github.com/facebook/react-native/commit/113f009698dbd8f1b4c1048d77ff1eb373021083

Flow类型ProgressViewIOS- https://github.com/facebook/react-native/commit/c87701ba05a8524756e87c089eb92c8f3c81823e

Flow类型PickerIOS- https://github.com/facebook/react-native/commit/1c66cdc7e8ce8190dfbef76629601497446b2b0a

Flow类型Switch- https://github.com/facebook/react-native/commit/06052a2330fc9c1dd0d56c6bbe5a17703f80c6b9

Flow类型Slider- https://github.com/facebook/react-native/commit/cbe045a95f1ca53d99ae521742a93299a53d6136

Flow类型RefreshControl- https://github.com/facebook/react-native/commit/891dfc3da4b5825097aedf73ff04e8982c00aeff

Flow类型ListView- https://github.com/facebook/react-native/commit/4b1ecb62045fbb78764d1f51030f2253be705c5c

Flow类型TextInput- https://github.com/facebook/react-native/commit/c8bcda8150278fde07331ca6958976b2b3395688

Flow类型为TouchableBounce- https://github.com/facebook/react-native/commit/8454a36b0bc54cb1e267bc264657cc693607da71

Flow类型为TouchableOpacity- https://github.com/facebook/react-native/commit/44743c07ad672e39668f92a801578906ec92996a

Flow类型TouchableHighlight- https://github.com/facebook/react-native/commit/f0c18dc820537892dcc33d5aebbf4f52cf299b95

Flow type for TouchableWithoutFeedback- https://github.com/facebook/react-native/commit/0b79d1faa21eb3c29aeeba08ee0fb2ed62e6cc54

Flow类型为ScrollView- https://github.com/facebook/react-native/commit/b1276622791d5dbe4199bb075f473908c3e62b31

Flow类型DatePickerIOS- https://github.com/facebook/react-native/commit/97e572ea6d7b1fd829ca20f5d5c8ff970d88e68b

Flow类型KeyboardAvoidingView- https://github.com/facebook/react-native/commit/188b118b6075be1614c553596b85d430767f2dbc

Flow类型ActivityIndicator- https://github.com/facebook/react-native/commit/0b71d1ddb03c036ed118574c105b0af505da19fc

Android特定的添加

使用CRLF添加对build.gradle的支持react-native link- https://github.com/facebook/react-native/commit/843cfc3b202433aad9a236b1b623da7c45e1ac15

添加一种方法来解除PopupMeny元素 - https://github.com/facebook/react-native/commit/353c070be9e9a5528d2098db4df3f0dc02d758a9

实现Image.defaultSource- https://github.com/facebook/react-native/commit/b0fa3228a77d89d6736da6fcae5dd32f74f3052c

支持Image resizeMode = repeat - https://github.com/facebook/react-native/commit/0459e4ffaadb161598ce1a5b14c08d49a9257c9c

Yoga:添加不赞成使用getParentAPI的方法 - https://github.com/facebook/react-native/commit/c3c5c3cbce24a31f73ae6339e377ee76ca6401ad

iOS特定的补充

使用Xcode 9.4和iOS 11.4运行测试 - https://github.com/facebook/react-native/commit/c55bcd6ea729cdf57fc14a5478b7c2e3f6b2a94d

添加对自制软件节点的支持 - https://github.com/facebook/react-native/commit/0964135a178b459e06b44a49a4ecb0dd6c5bec9b

添加textTransform样式支持 - https://github.com/facebook/react-native/commit/8621d4b79731e13a0c6e397abd93c193c6219000

将Swift用法的文档添加到RCTBridgeModule.h- https://github.com/facebook/react-native/commit/ca898f4367083e0943603521a41c48dec403e6c9

更改:现在不同的现有功能

升级原生Babel 7 - https://github.com/facebook/react-native/commit/f8d6b97140cffe8d18b2558f94570c8d1b410d5c

react-native init使用Babel 7 创建的新项目- https://github.com/facebook/react-native/commit/e315ec9891eb0bcb51afb0e797dbd49aa8f9ac71

限制WebView到只有HTTP(S)网址:https://github.com/facebook/react-native/commit/634e7e11e3ad39e0b13bf20cc7722c0cfd3c3e28 https://github.com/facebook/react-native/commit/23f8f7aecb1f21f4f5e44fb9e4a7456ea97935c9

Node8现在是所需的最低版本 - https://github.com/facebook/react-native/commit/c1e6f278237e84c8ed26d3d2eb45035f250e2d40

将React渲染器同步到版本c0fe8d6 - https://github.com/facebook/react-native/commit/f59e5a8d28491c64e4d0c08fec3a2b0b3fabb38b

升级Flow到v0.74 - https://github.com/facebook/react-native/commit/3bed272a620ac806a6142327013265ea8138641a

将Prettier版升级到v1.13.4 - https://github.com/facebook/react-native/commit/29fb2a8e90fa3811f9485d4b89d9dbcfffea93a6

将Jest升级到v23.1.0 - https://github.com/facebook/react-native/commit/536c9372692712b12317e657fc3e4263ecc70164

将Metro升级至v0.38 - https://github.com/facebook/react-native/commit/d081f83a0487ffbc7d19f8edc7532611b359dfc6

将Buck升级至v2018.03.26.01 - https://github.com/facebook/react-native/commit/1324e7b5580db815471172cf6dd140124bd2f11a

不允许引用不变/警告 - https://github.com/facebook/react-native/commit/521fb6d041167ec8a8d0e98ac606db1f27f0c5c8

删除本机道具类型验证 - https://github.com/facebook/react-native/commit/8dc3ba0444c94d9bbb66295b5af885bff9b9cd34

将$ FlowFixMe添加到Flow之前没有投诉的无效prop访问 - https://github.com/facebook/react-native/commit/f19ee28e7d896aaacf26c6f850230019bdef0d3d

更新react-devtools-core并plist包含以下报告的安全修复程序npm audit- https://github.com/facebook/react-native/commit/3a1d949906acb0c3b44d125d54d0c99305bbbb56

更新Switch到ES6课程 - https://github.com/facebook/react-native/commit/970caa4552d4ba87c1a954391535ff42b00832e7

更新Slider到ES6课程 - https://github.com/facebook/react-native/commit/5259450c143f71c65e157d6b7d3f0e1655eb7aa1

更新ActivityIndicator到ES6类 - https://github.com/facebook/react-native/commit/edd7acbb1e6fe185600a19cc1cbb38feb16c85ad

更新RefreshControl到ES6课程 - https://github.com/facebook/react-native/commit/a35a23831789030e17f766f72d307ae315be107d

更新KeyboardAvoidingView到ES6类 - https://github.com/facebook/react-native/commit/c017dcb0f2903b49b2f21cc150226aeb7f5026ee

更新DatePickerIOS到ES6类 - https://github.com/facebook/react-native/commit/f8c8231706492b588331354d45b833aa21434e13

更新Text到ES6类 - https://github.com/facebook/react-native/commit/ab92c00245c0ce717819ddb0ab8b9204d4c13c34

替换context.isInAParentTextw / React.createContext- https://github.com/facebook/react-native/commit/e1339bc18303ca5394cd0c9dc97cededb2261581

清理Text实施 - https://github.com/facebook/react-native/commit/06c05e744d8af9582bde348210f254d76dae48b9

切换Text到React.forwardRef- https://github.com/facebook/react-native/commit/e708010d18f938e2d6b6424cfc9485d8e5dd2800

切换View到React.forwardRef- https://github.com/facebook/react-native/commit/3e534b9aab5156adac67762877b2457408fe8934

更新使用genMockFunction,并genMockFn以fn在测试- https://github.com/facebook/react-native/commit/390ded871cb905d149e9c1f4a082e67a7ec7addb

请ViewProps准确- https://github.com/facebook/react-native/commit/65c336f38f4afd43c8b5f81745abf38bd9b8ddbf

蔓延TVViewProps到ViewProps代替路口- https://github.com/facebook/react-native/commit/bc658d3c4405676643d952a126295dbc7fc26217

允许尾随逗号 - https://github.com/facebook/react-native/commit/1e2de712907e5fe0d17648f0ff5c81d4384ca85b

使用let/ const- https://github.com/facebook/react-native/commit/8f5ebe5952d0675b463137103a82f3fb0c26ae0d

重构MockNativeMethods在Jest - https://github.com/facebook/react-native/commit/5d4c542c58d84bbe05f76bf01d9efdd9d438572c

app.json弹出后使用应用程序名称- https://github.com/facebook/react-native/commit/57774a4a981e2f12cfe9b029447e34f203221b18

建议git apply --reject升级失败 - https://github.com/facebook/react-native/commit/4fbd244b9a6b62e0efe1b4b5a7ec3de468f020f6

TouchHistoryMath从React 移动到React Native - https://github.com/facebook/react-native/commit/06085d38366373f3135074dc14e2c9871ca4fe29

重构RCTInputAccessoryView- https://github.com/facebook/react-native/commit/c136c54ff0211e2bf149fab600cd6e295f9d19dd

不要在额外的视图中包装ListEmptyComponent - https://github.com/facebook/react-native/commit/db061ea8c7b78d7e9df4a450c9e7a24d9b2382b4

将TextPropTypes 移动到它自己的文件 - https://github.com/facebook/react-native/commit/cd8128b2eccf6898cdf798a1e1be1f7a5762a0d4

ReactNative.NativeComponent在Jest中模拟原生方法 - https://github.com/facebook/react-native/commit/3e9a371ace5f25b2eb7a0d30177251f8a0c10ed9

收紧View和VirtualizedList- https://github.com/facebook/react-native/commit/5035af80ecddb44e2a8444780f25f336b760bf32

使值在ViewPropTypes- https://github.com/facebook/react-native/commit/f1316cab6c351852ef1da9939d4c8f0244fb8a6f中可选

propType对本地组件是可选的 - https://github.com/facebook/react-native/commit/dbdf43b428da19a9eba012753904bcf33339ea9a

将样式重命名为DangerouslyImpreciseStyle - https://github.com/facebook/react-native/commit/4895c645ea17ff939811f3d5ec6218cd4e31c5fb

iOS特定更改

iOS 9现在是最低要求的版本 - https://github.com/facebook/react-native/commit/f50df4f5eca4b4324ff18a49dcf8be3694482b51

更新podspecs以定位iOS 9 - https://github.com/facebook/react-native/commit/092103e7525e58e04346e0a1a16a67ca4f31c2e9

在WebSocket中阻止iOS 11.3+的控制台日志记录 - https://github.com/facebook/react-native/commit/8125be942bd5fd8fe851bad04ae6b9bcb0af4727

公开RCTFont尺寸覆盖 - https://github.com/facebook/react-native/commit/6611fefef7559c4cd3d1824235d263bff210d5e2

Android的具体变化

可口可乐现在播放声音 - https://github.com/facebook/react-native/commit/722f88ca9058c5d902c416b826a7a7ab347326b8

默认underlineColorAndroid为透明 - https://github.com/facebook/react-native/commit/a3a98eb1c7fa0054a236d45421393874ce8ce558

WebView默认禁用地理位置 - https://github.com/facebook/react-native/commit/23d61b35fb6fdbfb84f77b6d99ff155a0ff868e6

确保包含非法字符的cookie不会发送到okhttp - https://github.com/facebook/react-native/commit/04028bf2169b01f79bd86ecd6b0d8aa5f99599f1

更新应用图标以匹配最近的Android版本 - https://github.com/facebook/react-native/commit/94393f8652c414806fc861c214ad36e9ac1b6114

更好的错误讯息ReadableNativeMap- https://github.com/facebook/react-native/commit/30d06b42862fc5e8704e109db652d62f86f8eabc

将Fresco更新到v1.9.0,okhttp3更新到v3.10.0 - https://github.com/facebook/react-native/commit/6b07602915157f54c39adbf0f9746ac056ad2d13

为内嵌图标添加色调颜色 - https://github.com/facebook/react-native/commit/e8e2a6e4102c1ba0ee3d068769e47fa61c160524

修复抗锯齿圆角背景 - https://github.com/facebook/react-native/commit/7500b3ec839ada6d8e1f7a88d30743dfb0ad7e70

修正:已解决的错误

防止在打开模式时显示隐藏状态栏 - https://github.com/facebook/react-native/commit/076b1cea3563cae30e11d63cc100ceaed9082692

修复Perf Monitor启用时重新加载时的崩溃 - https://github.com/facebook/react-native/commit/4fcd9970bd2dfb24890bc87e9c82e16dab71ec09

修复远程调试器中的并发问题 - https://github.com/facebook/react-native/commit/e5aa5b7c508c5e0e51f7abfcee350e27bef24ba2

修复Modal + FlatList滚动 - https://github.com/facebook/react-native/commit/8799047dd0bc8dd93f05fa97d4b9a59f7dfeb324

修复RCTNetworking在无效期间并非所有任务/处理程序都被清除的错误- https://github.com/facebook/react-native/commit/b8051720344f3716e964eaf7cfdd2a91dc703602

修复键盘处理keyboardShouldPersistTaps: never- https://github.com/facebook/react-native/commit/ffe6c110f7ce33460fe0399ccbda16a6adbe90ca

修复响应者逻辑Text- https://github.com/facebook/react-native/commit/e2ce22b823661a7dcf6b70a825921a2910383bd1

修复VirtualizedSectionListlint警告 - https://github.com/facebook/react-native/commit/26a1eba1cef853b0dab7aad5731699c06d36b781

修复VirtualizedSectionList:ItemWithSeparators- https://github.com/facebook/react-native/commit/488a4c7e1c86ac5900ff9194106511fbf5a8e3cb

修复了TextInput初始布局测量 - https://github.com/facebook/react-native/commit/c6b4f9f2ce59bc757d9e211f46294faa03df55c6

修复requireNativeComponent检查 - https://github.com/facebook/react-native/commit/1c90a2b47b420a4b6aa16a55a344cc08f0eacbe3

修复TextInputautocapitalization bug - https://github.com/facebook/react-native/commit/ff70ecf868cf12fc66b45dc1496391d0a1e9011f

添加缺少的事件ViewPropTypes- https://github.com/facebook/react-native/commit/41a940392cea497bc5eb627b24083d0211d1eb89

添加缺少的Jest模拟StatusBarManager- https://github.com/facebook/react-native/commit/4a2c560768abb2d8407900fdb2fbe4971ae00a1c

为Metro模块添加流程声明 - https://github.com/facebook/react-native/commit/1853e1519030caaeeb7f31017d98823aa5696daf

修正类型ReactNative.NativeComponent(1/2) - https://github.com/facebook/react-native/commit/de11ba2a5ee90929dbc67d914de59bdd2ebc29ca

修正类型ReactNative.NativeComponent(2/2) - https://github.com/facebook/react-native/commit/752863629d63bca6d96a101bfeccc4e7ad3e953e

将图像PropTypes移至新文件 - https://github.com/facebook/react-native/commit/67656991b32075e8b4a99c6409b0a131206c6941

删除$ FlowFixMe TouchableBounce- https://github.com/facebook/react-native/commit/ffda0178509ed92396f15db37a41d3d668ade4e6

删除$ FlowFixMe ScrollView- https://github.com/facebook/react-native/commit/af6e2eb02d3651f869b5436e68e61ef3ab3405a0

删除$ FlowFixMe ListView- https://github.com/facebook/react-native/commit/af6e2eb02d3651f869b5436e68e61ef3ab3405a0

删除$ FlowFixMe Text- https://github.com/facebook/react-native/commit/6042592cf46787f089e76b661376705380607207

删除$ FlowFixMe RTLExample- https://github.com/facebook/react-native/commit/206ef54aa415e3e2bb0d48111104dfc372b97e0f

删除$ FlowFixMe AppContainer- https://github.com/facebook/react-native/commit/a956551af73cf785ee4345e92e71fd5b17c5644e

删除$ FlowFixMe Slider- https://github.com/facebook/react-native/commit/1615f9d16149c7082ce0e1485aa04a6f2108f7ba

测试:修复运行Jest时的JUnit报告位置 - https://github.com/facebook/react-native/commit/85fc98d437c08cdec883a73161e120478737ba72

测试:修复ReactImagePropertyTest SoLoader失败(#19607) - https://github.com/facebook/react-native/commit/a52d84d7e1cdb287f2877c4d85f2e9866c248d43

测试:在Windows上修正jest快照测试 - https://github.com/facebook/react-native/commit/216bce31632480ce70cc03b1b2a57ec12440afd7

iOS特定的修补程序

修复InputAccessoryView安全区域的性能 - https://github.com/facebook/react-native/commit/490f22ae72ba43fa9364ce0f6c238744c07ac830

修正在头文件中使用C ++语法 - https://github.com/facebook/react-native/commit/bfcfe7961db0970e2575eafe2f3c9c668bd8940d

运行时修复安装步骤run-ios- https://github.com/facebook/react-native/commit/0934c1778f0e3c0b691e1a3ca2df1d486eb905dd

修复了run-ios未启用模拟器 - https://github.com/facebook/react-native/commit/9736ddc061e9c4291df8a3185c7f9d6f73e435c7

为鱼钩使用正确的库参考。这修正了Xcode 9和Xcode 10上的新Xcode构建系统的构建 - https://github.com/facebook/react-native/commit/a8b74576da6f1a42fde4e39f97e88c8f45a3a51d

将缺少的onChange事件定义添加到DatePickerIOS- https://github.com/facebook/react-native/commit/3b53091869b673ea33a4af34242e2227ca944768

修复Xcode 9.3存档阶段的崩溃 - https://github.com/facebook/react-native/commit/344c205070d5ad670c97984dd86ec9ac13c73f81

RNTesterPods:添加缺少的愚蠢包括 - https://github.com/facebook/react-native/commit/128c9343c464f3e7898d6e245f135f8bdf6caa6a

RNTesterPods:愚蠢::可选的has_value(),以hasValue()直至愚蠢升级- https://github.com/facebook/react-native/commit/128c9343c464f3e7898d6e245f135f8bdf6caa6a

RNTesterPods:修复导入RCTTestAttributes.h- https://github.com/facebook/react-native/commit/128c9343c464f3e7898d6e245f135f8bdf6caa6a

RNTesterPods:修复conversions.h使用名称空间包括 - https://github.com/facebook/react-native/commit/128c9343c464f3e7898d6e245f135f8bdf6caa6a

修复或标记枚举转换浮出水面-Wenum-conversion- https://github.com/facebook/react-native/commit/b8f30db0ae21d5f96547702abbf50aefa93b1094

修复CocoaPods集成,无需DevSupport subspec - https://github.com/facebook/react-native/commit/c09d509c2b8a5a02701829e1f0ace8081ce64277

更新瑜伽来处理Xcode框架项目 - https://github.com/facebook/react-native/commit/cf036dbc7af16a8453c115372694dc51e8086fcf

修复Blob内存泄漏 - https://github.com/facebook/react-native/commit/122b3791ede095345f44666691aa9ce5aa7f725a

Android特定的修补程序

正确绘制路径的尺寸,同时做边框,修复模糊的边框 - https://github.com/facebook/react-native/commit/c5ca26a0e5c0660196300ee34d6007c63879611f

不通过额外的参数,以requireNativeComponent在.android.js文件- https://github.com/facebook/react-native/commit/a51e8b19cc4dc36dee42ac95278b883c06b2e40f

防止RefreshControl父母水平滚动时卡住 - https://github.com/facebook/react-native/commit/33ffa79a51d4db9ba69148861f2da304646175cd

防止由于不支持的省略号模式导致崩溃 - https://github.com/facebook/react-native/commit/85e33aaf908996e99220bff4a2bdbbdf7c0d12b0

修复okhttp3响应处理DevServerHelper- https://github.com/facebook/react-native/commit/56d48bd9ecd2d0f08625259121312531064a09f2

修复ReactInstanceManagerunmountApplication以支持ReactRootView回收 - https://github.com/facebook/react-native/commit/4a9b2a73021fb547febe1fa193c3effb7ff8da4e

NullPointerException使用UIManagerModule- https://github.com/facebook/react-native/commit/291c01f4ffe614760852e36b05d78b42cb4271df排除事件时进行修复

修复Android制作指南链接 - https://github.com/facebook/react-native/commit/57e7556b8db61e5fcc3ccea56c1b163b82a091a6

修复Android开源测试失败 - https://github.com/facebook/react-native/commit/3e0ebc76632238f21c60caa92c7a2b5ee8102b71

使用LayoutAnimation修复视图索引 - https://github.com/facebook/react-native/commit/d8fcdb9bd7a308ed70caeac1b53da0a05abe452f

修复originalNode内存泄漏 - https://github.com/facebook/react-native/commit/8102e35271ab68e0525a9c60d86a855bbeef9c1a

修正ScrollView了TextInput- https://github.com/facebook/react-native/commit/2f1421dec7cd3a35779caceac108e872033c7d72

处理程序未定义时禁用onKeyPRess逻辑 - https://github.com/facebook/react-native/commit/41975f75d96ef4b606b4618461bf24d5db063b77

已删除:已删除的功能; 这些都打破了

弃用focusTextInput和blurTextInput- https://github.com/facebook/react-native/commit/ce3b7b8204dad0fd62a76a0ce66472eca4b25bc8

Android特定的删除

删除本机扩展 - https://github.com/facebook/react-native/commit/7c5845a5a26592598c9380df078766a680a23f06

删除Fresco ProGuard规则 - https://github.com/facebook/react-native/commit/07df36557c8cbbaee5e870460162aa725a606ff4

iOS特定的删除

已移除已弃用的UIActionSheetDelegate方法 - https://github.com/facebook/react-native/commit/5863b564f84b9fe97b256f8cde0f7f2e1db9b641

关注小编 公众号:LearningTech 每日更新前端技术

2018-12-13 10:24:08 zoepriselife316 阅读数 535

在本地下载好,并且改完了文件,正常运行的情况下,使用react-native-img-cache组件写了个小的demo,成品如图:

轮播图和单纯图片

想要使用react-native-swiper组件,**记得先下载 **:
官网地址:https://github.com/leecade/react-native-swiper

使用react-native-swiper组件的基本命令

安装:npm i react-native-swiper --save
查看:npm view react-native-swiper
删除:npm rm react-native-swiper --save

在使用前,记得要先引入:

import Swiper from 'react-native-swiper';

下面就可以看这个img-cache了:

CachedImage

用于显示图片:

import {CachedImage} from "react-native-img-cache";

<CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }}  mutable/>

该mutable属性暗示假设图像URI可以随时间改变。此缓存的生命周期是正在运行的应用程序之一,可以使用它手动终止ImageCache

ImageCache

clear():删除缓存条目和所有物理文件。

ImageCache.get().clear();

bust(uri):ImageCache可用于从本地缓存中清除图像。这将删除缓存条目,但不会删除任何物理文件。

ImageCache.get().bust("http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg");

cancel(uri):它还可用于取消图像下载。滚动图像时,这非常有用。

ImageCache.get().cancel("https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360")

on(uri,observer,immutable):该ImageCache班可观察员缓存中注册。

const immutable = true;
const observer = (path: string) => {
    console.log(`path of the image in the cache: ${path}`);
};
ImageCache.get().on(uri, observer, immutable);

dispose(uri, observer):观察员可以使用dispose以下方式注销:

ImageCache.get().dispose(uri, observer);

demo中的获取数据和清空,都是可以实现的,
代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,Platform,
  Dimensions,
} from 'react-native';
import {CachedImage, ImageCache,CustomCachedImage,} from "react-native-img-cache";   
//CachedImage:用来显示图片 ImageCache:用来管理的,比如获取图片的路径、清理缓存神马的

const carouselMokeData =[
    {
        "title": "阳光明媚,青春正好",
        "previewUrl": "http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=2bf80c7b0633874488c8273f3966b38c/eaf81a4c510fd9f90af607422f2dd42a2834a43c.jpg"
    },
    {
        "title": "自信,是无尽智慧的凝聚.",
        "previewUrl": "http://pic1.16pic.com/00/11/69/16pic_1169706_b.jpg"
    },
    {
        "title": "平淡,是成功路上的驿站.",
        "previewUrl": "http://pic9.photophoto.cn/20081229/0034034885643767_b.jpg"
    },
]
export default class catchDemo extends Component {
    constructor(props) {
        super(props);
       
    //   this._goBack = this._goBack.bind(this);
    }
  
  componentWillMount() {
       // console.warn(JSON.stringify(ImageCache.get()))
        // ImageCache.get().cancel("https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360")
         // console.warn('取消下载第一张图')
    }

      //首页轮播图
    renderSwiperView() {
        let images = carouselMokeData.map((value, i) => {
                return (
                    <View key={i} style={{backgroundColor:'#ededed',}}>
                        <CachedImage source={{uri:value.previewUrl}} resizeMode='stretch' style={{height:300,width: Dimensions.get('window').width}}/>
                        <Text numberOfLines={1} style={{backgroundColor:'rgba(51,51,51,0.7)',position:'relative',bottom:Platform.OS == 'android'?55:51,width: Dimensions.get('window').width,fontFamily:'.PingFangSC-Medium',fontSize: 15, color: '#fff',paddingBottom:10,paddingTop:10,paddingLeft:15}}>{value.title}</Text>
                    </View>
                );
            });
        return (
            <Swiper removeClippedSubviews={false} height={300} horizontal={true} autoplay={true} autoplayTimeout={2} dotColor={'rgba(255,255,255,0.26)'} activeDotColor={'#fff'} paginationStyle={{bottom:38, left: null, right: 10}}>
                {images}
            </Swiper>
        );
    }
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor:'pink',height:300}}>
            <View style={{height:'100%',width:'100%',}}>
                {this.renderSwiperView()}
            </View>     
        </View>   
        <View style={styles.imageStyle}>               
            <CachedImage style={styles.imgsStyle}  
              source={{ uri: "https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360" }} 
               />  {/*其实mutable的属性是代表图片的地址会随着时间的改变发生变化,地址不固定。那么该缓存的生命周期应用的运行时期并且该可以通过ImageCache模块进行手动管理,在这没有我没有在CachedImage添加这个属性*/}
            <TouchableOpacity onPress={()=>{console.log(JSON.stringify(ImageCache.get()))}}  >
                <CachedImage 
                    style={styles.imgsStyle}  
                    source={{ uri: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg" }}
                 />
            </TouchableOpacity>
        </View>
        <View style={{backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',width:400}}>
          <TouchableOpacity onPress={()=>{console.warn(JSON.stringify(ImageCache.get()))}} >
              <Text>获取数据</Text>
           </TouchableOpacity>
           {/*<TouchableOpacity onPress={()=>{ImageCache.get().clear();console.warn(JSON.stringify(ImageCache.get())) }}  >*/}
           <TouchableOpacity onPress={()=>{ImageCache.get().bust("http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg");console.warn(JSON.stringify(ImageCache.get()))}}  >
              <Text>清空</Text>
           </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  imageStyle: {
   // flexDirection:'row',
    marginBottom: 5,

  },
  imgsStyle:{
    width:'100%',
     height: 200,
     backgroundColor:'#ededed',
     marginTop:20,
  }
});

AppRegistry.registerComponent('catchDemo', () => catchDemo);

以上就是写的小demo了,希望可以帮助需要的人(包括偶自己),继续加油!

2018-07-26 22:44:57 xiangzhihong8 阅读数 618

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native 之前,可以先简要了解一下。

目录

Properties 属性

Text 文本(18)

属性名 取值 描述
color <color> 对应 CSS color 属性
fontFamily string 对应 CSS font-family 属性
fontSize <number> 对应 CSS font-size 属性
fontStyle normal, italic 对应 CSS font-style 属性,但阉割了 oblique 取值
fontWeight normal, bold 100~900 对应 CSS font-weight 属性,但阉割了 bolder, lighter 取值
lineHeight <number> 对应 CSS line-height 属性
textAlign auto, left, right, center, justifyiOS 对应 CSS text-align 属性,但增加了 auto 取值。当取值为 justify 时,在 Android 上会变为 left
textDecorationLine none, underline, line-through, underline line-through 对应 CSS text-decoration-line 属性,但阉割了 overline, blink 取值
textShadowColor <color> 对应 CSS text-shadow 属性中的颜色定义
textShadowOffset {
width:<number>,
height:<number>
}
对应 CSS text-shadow 属性中的阴影偏移定义
textShadowRadius <number> CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
includeFontPadding
Android
<bool> Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false
textAlignVertical
Android
auto, top, bottom, center 对应 CSS vertical-align 属性,增加了 auto 取值,center 取代了 middle,并阉割了 baseline, sub 等值
fontVariant
iOS
small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums 对应 CSS font-variant 属性,但取值更丰富
letterSpacing
iOS
<number> 对应 CSS letter-spacing 属性
textDecorationColor
iOS
<color> 对应 CSS text-decoration-color 属性
textDecorationStyle
iOS
solid, double, dotted, dashed 对应 CSS text-decoration-style 属性,但阉割了 wavy 取值
writingDirection
iOS
auto, ltr, rtl 对应 CSS direction 属性,增加了 auto 取值

Dimension 尺寸(6)

属性名 取值 描述
width <number> 对应 CSS width 属性
minWidth <number> 对应 CSS min-width 属性
maxWidth <number> 对应 CSS max-width 属性
height <number> 对应 CSS height 属性
minHeight <number> 对应 CSS min-height 属性
maxHeight <number> 对应 CSS max-height 属性

Positioning 定位(6)

属性名 取值 描述
position absolute, relative 对应 CSS position 属性,但阉割了 static, fixed 取值
top <number> 对应 CSS top 属性
right <number> 对应 CSS right 属性
bottom <number> 对应 CSS bottom 属性
left <number> 对应 CSS left 属性
zIndex <number> 对应 CSS z-index 属性

Margin 外部白(7)

属性名 取值 描述
margin <number> 对应 CSS margin 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的外补白,可以通过下面的单向外部白属性
marginHorizontal <number> 无对应的 CSS 属性。其效果相当于同时设置 marginRightmarginLeft
marginVertical <number> 无对应的 CSS 属性。其效果相当于同时设置 marginTopmarginBottom
marginTop <number> 对应 CSS margin-top 属性
marginRight <number> 对应 CSS margin-right 属性
marginBottom <number> 对应 CSS margin-bottom 属性
marginLeft <number> 对应 CSS margin-left 属性

Padding 内部白(7)

属性名 取值 描述
padding <number> 对应 CSS padding 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的内补白,可以通过下面的单向内部白属性
paddingHorizontal <number> 无对应的 CSS 属性。其效果相当于同时设置 paddingRightpaddingLeft
paddingVertical <number> 无对应的 CSS 属性。其效果相当于同时设置 paddingToppaddingBottom
paddingTop <number> 对应 CSS padding-top 属性
paddingRight <number> 对应 CSS padding-right 属性
paddingBottom <number> 对应 CSS padding-bottom 属性
paddingLeft <number> 对应 CSS padding-left 属性

Border 边框(20)

属性名 取值 描述
borderStyle solid, dotted, dashed 对应 CSS border-style 属性,但阉割了 none, hidden, double, groove, ridge, inset, outset 取值,且无方向分拆属性
borderWidth <number> 对应 CSS border-width 属性
borderTopWidth <number> 对应 CSS border-top-width 属性
borderRightWidth <number> 对应 CSS border-right-width 属性
borderBottomWidth <number> 对应 CSS border-bottom-width 属性
borderLeftWidth <number> 对应 CSS border-left-width 属性
borderColor <color> 对应 CSS border-color 属性
borderTopColor <color> 对应 CSS border-top-color 属性
borderRightColor <color> 对应 CSS border-right-color 属性
borderBottomColor <color> 对应 CSS border-bottom-color 属性
borderLeftColor <color> 对应 CSS border-left-color 属性
borderRadius <number> 对应 CSS border-radius 属性
borderTopLeftRadius <number> 对应 CSS border-top-left-radius 属性
borderTopRightRadius <number> 对应 CSS border-top-right-radius 属性
borderBottomLeftRadius <number> 对应 CSS border-bottom-left-radius 属性
borderBottomRightRadius <number> 对应 CSS border-bottom-right-radius 属性
shadowColor <color> 对应 CSS box-shadow 属性中的颜色定义
shadowOffset {
width: <number>,
height: <number>
}
对应 CSS box-shadow 属性中的阴影偏移定义
shadowRadius <number> CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
shadowOpacity <number> 对应 CSS box-shadow 属性中的阴影透明度定义

Background 背景(1)

属性名 取值 描述
backgroundColor <color> 对应 CSS background-color 属性

Transform 转换(3)

属性名 取值 描述
transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] 对应 CSS transform 属性
transformMatrix TransformMatrixPropType 类似于 CSStransform 属性的 matrix()matrix3d() 函数
backfaceVisibility visible, hidden 对应 CSS backface-visibility 属性

Flexbox 弹性盒(9)

属性名 取值 描述
flex <number> 对应 CSS flex 属性,但只能为整数值
flexGrow <number> 对应 CSS flex-grow 属性
flexShrink <number> 对应 CSS flex-shrink 属性
flexBasis <number> 对应 CSS flex-basis 属性
flexDirection row, row-reverse, column, column-reverse 对应 CSS flex-direction 属性
flexWrap wrap, nowrap 对应 CSS flex-wrap 属性,但阉割了 wrap-reverse 取值
justifyContent flex-start, flex-end, center, space-between, space-around 对应 CSS justify-content 属性,但阉割了 stretch 取值。
alignItems flex-start, flex-end, center, stretch 对应 CSS align-items 属性,但阉割了 baseline 取值。
alignSelf auto, flex-start, flex-end, center, stretch 对应 CSS align-self 属性,但阉割了 baseline 取值

Other 其他

属性名 取值 描述
opacity <number> 对应 CSS opacity 属性
overflow visible, hidden, scroll 对应 CSS overflow 属性,但阉割了 auto 取值
elevation
Android
<number> CSS中没有对应的属性,只在 Android5.0+ 上有效
resizeMode cover, contain, stretch CSS中没有对应的属性,可以参考 background-size 属性
overlayColor
Android
string CSS中没有对应的属性,当图像有圆角时,将角落都充满一种颜色
tintColor
iOS
<color> CSS中没有对应的属性,iOS 图像上特殊的色彩,改变不透明像素的颜色

Valuse 取值

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型:

  • #f00 (#rgb)
  • #f00c (#rgba):CSS 中无对应的值
  • #ff0000 (#rrggbb)
  • #ff0000cc (#rrggbbaa):CSS 中无对应的值
  • rgb(255, 0, 0)
  • rgba(255, 0, 0, 0.9)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 0.9)
  • transparent
  • 0xff00ff00 (0xrrggbbaa):CSS 中无对应的值
  • Color Name:支持了 基本颜色关键字拓展颜色关键字,但不支持 28个系统颜色

Number 数值

React-Native 中,目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位,详细请看 Units 单位 部分。

Units 单位

Pt 点

React-Native 中,并不支持百分比单位,目前只支持一种单位,即 pt 绝对长度单位,同时,你在定义时不需要加单位,例如:

<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

PixelRatio 像素密度

React-Native 中,访问设备像素密度的方法由 PixelRatio 类提供。

我们的应用通常都会运行在不同的设备上,并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是:

  • 定义了元素的边框为 1像素,而实际上在不同像素密度的设备上结果不一样,比如:iPhone6 显示为 2像素,iPhone6 Plus 显示为 3像素
  • 对于一个图片来讲,因为设备的像素密度不同,它也需要对应不同尺寸的规则,以防止图片过小变得模糊;

根据像素密度指定边框厚度

出于对产品体验的一致性,我们会要求不论是在哪种设备上,其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比:

var styles = StyleSheet.create({
    box: {
        borderWidth: 1 / PixelRatio.get(),
        borderStyle: solid
    }
});

上述代码将保证你的应用在所有的设备上(像素密度),都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度。

未完待续。。。