您的位置：首页 > Web前端 > React

React Native 学习笔记三（关于prop属性的使用和复用）

2016-09-13 10:25 519 查看



例子出现了一样名为
View
的组件。
View
 常用作其他组件的容器，来帮助控制布局和样式。（每个return下面
只能有一个直属的View）

仅仅使用
props
和基础的
Text
、
Image
以及
View
组件，就已经足以编写各式各样的UI组件了。


Props（属性）import {

AppRegistry,

StyleSheet,

Image,

View

} from 'react-native';

class helloReact extends Component {

//渲染

render() {

//pic 外层有{} 是为了将变量嵌套进jsx中 {}表示的意思事{}内部为一个js变量或者表达式 需要执行 并将执行后的值取出

// let相当于var 变量定义 (目前理解)

let pic = {

uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'

};

return (

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

);

}

}

不同的场景使用不用的属性定制  可以提高复用性 

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class Greeting extends  Component{
render(){
return(
//自定义控件也可以使用props(属性)
<Text>Hello{this.props.name}</Text>
);
}
}

class helloReact extends Component {
//渲染
render() {
return (
//设置显示风格 自定义View 显示结果为Hellohello HelloWorld
<View style={{alignItems:'center'}}>
<Greeting name='hello'/>
<Greeting name='World'/>
</View>
);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航