React Native入门基础——Props
来源:互联网 发布:网络推广代理公司 编辑:程序博客网 时间:2024/04/30 17:42
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语句中,用法和内置组件一样。
0 0
- React Native入门基础——Props
- react native学习笔记6——Props和State
- 蓝鸥React Native零基础入门到项目实战 props
- react——props
- React Native 之 Props
- react-native 基础入门
- React Native入门基础
- react——传递 Props
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- react native -- this.props.children
- React Native State和Props
- [React-Native]Props和State
- React native学习第一章:Props
- React Native之Props属性
- React-Native 属性设置props
- React Native入门基础框架
- React Native 入门基础学习
- React Native基础与入门(二)--初识React Native
- ios应用内跳转到appstore里评分
- 【Spark Java API】Action(5)—treeAggregate、treeReduce
- python中os.path以及sys.path模块简介
- PAT 1026 Table tennis
- gulp 配置
- React Native入门基础——Props
- HUST 1010 KMP最短循环节
- 过早的优化是万恶之源,细数优化7大原则
- html中表单post方法与php还有sql交互的最简单demo
- 字符串的拼接
- 创建第一个node,express,ejs网站详细介绍
- 2016/08/20 接口
- maven入门基础知识
- Linux服务器使用情况简单介绍