react常用语法

1、获取dom结构

<div className="Component_projress" ref="projressBar"

js中:

let projressBar = this.refs.projressBar;

 2、将图片作为背景图

<Image source={require('./hello.jpg')} >
  <Text style={{fontSize: 50, color: 'red',}}>HELLO WORLD</Text>
</Image>

内容写在 

Image 标签里面便可以。

3、将图片作为满屏
const styles = StyleSheet.create({
  backgroundImage:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
    width:null,
    height:null,
    //不加这句,就是按照屏幕高度自适应
    //加上这几,就是按照屏幕自适应
    //resizeMode:Image.resizeMode.contain,
    //祛除内部元素的白色背景
    backgroundColor:'rgba(0,0,0,0)',
  }
});

 4、使用多种样式

在标签上使用多个css样式的时候要用[]给括起来,并且行内样式的优先级大于StyleSheet定义的样式

style={[styles.button, {backgroundColor: this.props.bg}]

 5、点击事件

不传递参数

<Button size="small" type="danger" onClick={this.clickFun}>删除</Button>

传递参数

<Button size="small" type="primary" onClick={() => this.clickFun(record, index)}>添加</Button>

 

 
posted @ 2017-09-03 20:12  haonanElva  阅读(291)  评论(0编辑  收藏  举报