一、props
父组件
import Props from './components/props.js';
// 定义并导出自定义组件
export default class App extends Component{
render(){
// 展开运算符 ...
var userinfo = {
name:'王五',age:30,hopy:'足球'};
//解构赋值
let {
name,hopy} = userinfo;
return (
// <Props name={userinfo.name} age={userinfo.age} hopy={userinfo.hopy}/>
//用...userinfo扩展运算符,子组件可以直接使用属性名
// <Props {...userinfo}/>
//这里用了上面的解构
<Props name={
name} hopy={
hopy}/>
)
}
}
子组件
//引入props类型判断的方法
import PropTypes from 'prop-types';
// 定义并导出自定义组件
export default class Props extends Component{
//设置props默认值
static defaultProps={
age:20,
hopy:'篮球'
}
//检测props属性值
static propTypes={
name:PropTypes.string
}
render(){
return (
<View>
<Text style={
[styles.font,styles.text,{
color:'blue'}]}>
//使用父组件传过来的的属性,用this.props.属性名
hello{
this.props.name}{
'\n'}
年龄:{
this.props.age}{
'\n'}
爱好:{
this.props.hopy}
</Text>
</View>
)
}
}
二、State
以吹气球小案例来演示改变state,从而重新渲染页面
export class State extends Component {
constructor(props) {
super(props)
//定义state
this.state = {
size:150
}
}
render() {
let {
size}=this.state
return (
<View >
<Text
//onPress类似于点击事件,只能用在Text上
//用this.setState({})改变,于react中的一样
onPress={
()=>this.setState({
size:size+10})}
style={
{
color:"red",fontSize:50}}
>吹气</Text>
<Text
onPress={
()=>this.setState({
size:size-10})}
style={
{
color:"red",fontSize:50}}
>放气</Text>
<Image source={
require("../images/qq.jpg")}
style={
{
width:size,height:size}}
></Image>
</View>
)
}
}