文档章节

ReactNative学习笔记

v
 vincentwu08
发布于 2016/09/29 14:39
字数 239
阅读 64
收藏 0

可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中

let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};

<Image source={pic} style={{top: 100, left: 100, width: 193, height: 110}} />

Image:

style的props位置信息有

width、height、top、left、right、bottom、minWidth、maxWidth、minHeight、maxHeight、margin、marginVertical、marginHorizontal、marginTop、marginBottom、marginLeft、marginRight、padding、paddingVertical、paddingHorizontal、paddingTop、paddingBottom、paddingLeft、paddingRight、borderWidth、borderWidth、borderTopWidth、borderRightWidth、borderBottomWidth、borderLeftWidth、position、flexDirection、flexWrap、justifyContent、alignItems、alignSelf、flex、flexShrink、flexBasis、zIndex、shadowColor、shadowOffset、shadowOpacity、shadowRadius、transform、transformMatrix、decomposedMatrix、scaleX、scaleY、rotation、translateX、translateY、resizeMode、backfaceVisibility、backgroundColor、borderRadius、overflow、tintColor、opacity、overlayColor、borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius

样式

在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承

<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height,也没有设定flex,则父容器的尺寸为零。其子组件如果使用了flex,也是无法显示的。

© 著作权归作者所有

上一篇: 项目配置
下一篇: Git的ignore设置
v
粉丝 1
博文 18
码字总数 3390
作品 0
杭州
私信 提问
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记2-组件的生命周期

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、ReactNative提供了哪些组件 基础组件 View 基础组件 Text 文本组件 Image 图片...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、父子组件传值 2.1 父组件传值到子组件(顺传) props 属性传值 通过定义子组件的...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、导航使用 虽然系统有Navigator可以用,但是0.44版本后就不在推荐使用,而是让我...

摸着石头过河_崖边树
2018/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
40分钟前
5
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
43分钟前
7
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
44分钟前
3
0
influxdb continuous queries(cq)从入门到放弃

从前一篇influxdb的文章prometheus基于influxdb的监控数据持久化存储方案完成之后,就一直在折腾influxdb发布测试和生产环境的问题,经过接近2个月的验证,最终发现使用influxdb自带cq的方案...

狗陈
55分钟前
7
0
7.线程通信

在现实生活中,如果一个人团队正在共同完成任务,那么他们之间应该有通信,以便正确完成任务。 同样的比喻也适用于线程。 在编程中,要减少处理器的理想时间,我们创建了多个线程,并为每个线...

Eappo_Geng
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部