小学生的RN 学习笔记1

Props(属性)

先看第一个例子:

export default class XXX extends Componet {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}

这里面 pic就是一个props,下面的image 让 pic这个props赋值到source中去。下面这句JSX中source = {pic} 的括号表示里面是js变量或者表达式

我们再看另外一个例子

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

class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}

上面的这段定义了一个名为Greeting的组件类,这个类的功能就是把这个name作为一个属性 --- 可以看做是一个类里面参数,根据这个参数输出。

export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
上面这段就是引用了Greeting这个组件类,传入name参数不同来控制效果。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容