RN CSS 样式

在开发rn 的时候,存在的者样式的,调整,其实对于一个做客户端的人来说没有什么难度。但是对于一个不是很熟的的客户段开发者来说,在从不熟悉到熟悉的道路上是,有时候一个问题会卡顿很久,所以必要的总结还是有必要的,

首先看下要实现的效果:

这里写图片描述


一个剧中现实的哦圆角的button

 <View style={style.impressTagBox}>
            <Button
              onPress={this.lookMoreComments}
              style={style.lookMoreCommentBtn}
              textStyle={style.lookMoreCommentText}
            >
              {lookMoreCommentText}
            </Button>
          </View>

css 的样式

 lookMoreCommentBtn: {
    padding: scaleSize(24),
    borderStyle: 'solid',
    borderColor: '#4289ff',
    borderWidth: p1x,
    height: scaleSize(60),
    borderRadius: 16,
    justifyContent: 'center',
    backgroundColor: '#ffffff'
 },
 lookMoreCommentText: {
   fontSize: setSpText(28),
   justifyContent: 'center',
   color: '#4289ff'
 },
  impressTagBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: scaleSize(24),
    marginTop: scaleSize(60),
  },
 thirdCommentImageArrow: {
    height: scaleSize(24),
    width: scaleSize(24),
  }

这个样式关键是在button 的最外层加了 层标签,同时属性设置成

 alignItems: 'center',
 justifyContent: 'center',
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值