React-Native 中各种属性设置收集

我会一直补充哦，开发中遇到神奇的设置都会补充上来的哦～

• 组件与组件之间的间隔距离, 默认单位是 px

margin: 10;

• 组件与内容之间的间隔距离, 默认单位是 px， Text 组件中常用

padding: 10;

• 设置组件之间，水平方向布局

flexDirection: 'row',

• 设置组件之间，竖直方向布局, react-native默认是这种布局方式

flexDirection: 'column',

• 调整水平方向左右贴边分布

justifyContent: 'space-between',

• 调整水平线方向居中分布，不会影响单个子组件向左移或向右移

justifyContent: 'center',

• 调整竖直方向上下贴边分布

alignItems: 'space-between',

• 调整竖直线方向居中分布，会影响单个子组件向左移或向右移

alignItems: 'center',

• 关于 Text 组件，实现自动换行

设置组件的宽度为固定值，也可以将固定的宽度值设置给它的父组件，这样才会在文本过长的时候，实现换行

• 关于Text 组件，实现宽度固定的情况下，字体自适应大小的设置

设置 adjustsFontSizeToFit 值为 true

• 设置阴影

shadowColor: '#0C143A',//阴影颜色

elevation: 5, //阴影高度，安卓端必须设置此参数才能有阴影效果

shadowOffset: { width: 0, height: 8 },//阴影高度

shadowOpacity: 0.06,//阴影透明度

shadowRadius: 5,//阴影圆角

• 设置旋转动画

transform: [
    {
        rotateZ: this.state.rotateValue.interpolate
        ({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        })
    }
]

inputRange: 输入的变化值，范围变化0-1

outputRange: 输出的变化值，角度从0-360

• 设置段落文本, 行间距

lineHeight: 24,

• 设置段落文本, 字间距

letterSpace: 4,

• 设置当文本过长时，自动显示为省略号

numberOfLines: 1,

• 设置渐变颜色
• 推荐一款还算好用的组件线性渐变

-设置 image 组件的圆角

如果只需要设置图片的圆角，只需要使用 borderRadius设置就可以实现

如果需要设置图片加文本的圆角，比如一个view上，上面是图片，下面是文案，要求设置整个view的圆角，就需要使用overflow属性，否则苹果有的机型上面可能不会出现圆角效果

subContainer: {
        borderRadius: 5,
        overflow: 'hidden',
    },
    image: {
        width: 90,
        height: 90,
    },

• 另一种设置圆角的方法，指定四个角的方向

subContainer: {
        borderTopRightRadius: 15,
        borderTopLeftRadius: 15,
        //borderBottomLeftRadius: 5,
        //borderBottomRightRadius: 5,
        overflow: 'hidden', //iOS必须增加设置这个属性，否则不会出现圆角，Adriod可以不用设置
    },
    image: {
        width: 90,
        height:90,
    },

• 设置overflow属性，有visible和hidden两种值

overflow表示，对超过视图的内容区域是否进行裁剪，设置超过的部分是否可见

###贴上本人翻译的一本后现代小说地址，亚马逊已上架，欢迎阅读，吐槽～哈###