React Native入门基础——Props
2016-08-20 12:11
651 查看
React Native入门基础——Props
JSX和JS一.Props(属性)
大多数组件在创建的时候就可以用各种参数来进行定制。用于定制的这些参数就称为props(属性)
二.Props例子
1.Image组件
render(){ let pic = { uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return (<Image source = {pic} style={{width: 193,height: 110}}/>); }
分析:
{}:把任意合法的JavaScript表达式通过括号嵌入到JSX语句中 ,括号内部为一个js变量或表达式
例如:{pic}:用括号把pic变量嵌入到JSX语句中
2.自定义组件
自定义组件也可以使用props,在render函数中引用this.props
class Class1 extends Component{ render(){ return(<Text>Hello {this.props.name}</Text>); } } class AwesomeProject extends Component { render (){ return( <View style={{alignment:'center'}}> <Class1 name='a'/> <Class1 name='b'/> <Class1 name='c'/> </View> ); } }
分析:
咋Class1中将name作为一个属性,将Class1组件写在JSX语句中,用法和内置组件一样。
相关文章推荐
- React Native基础&入门教程:以一个To Do List小例子,看props和state
- React Native基础&入门教程:以一个To Do List小例子,看props和state
- React Native入门基础框架
- React Native基础与入门(二)--初识React Native
- react-native 基础入门
- React Native基础&入门教程:调试React Native应用的一小步
- React Native基础入门之初步使用Flexbox布局
- React-Native 基础学习入门指南
- React Native 入门(五) - Props(属性)
- React Native 入门基础学习
- React-Native 基础(二) 使用Props实现传参定制
- React Native基础与入门(一)--搭建开发环境
- ReactNative开发(二)之基础与入门
- React native最基础的入门知识点
- React Native基础入门之调试React Native应用的一小步
- React Native入门基础
- React Native基础&入门教程:初步使用Flexbox布局
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- ReactNative入门之props与state
- 基础篇章:关于 React Native 的props,state,style的讲解