reactnative props用法

组件定义每个单词的首字母要大写

在APP.js里调用

import PropsTest from './propsTest';
以及在render函数里调用子组件
render() {
    return (
        <View style={styles.container}>
           <PropsTest
              name="熊爱明"
           />
        </View>
    );
}

在子组件里申明

 export  default class PropsTest extends Component{
    render () {
       return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello+{this.props.name}</Text>
    }
}

传递默认属性

propsTest.js

别忘记加

static修饰符

 export  default class PropsTest extends Component{
    设置默认属性
    static defaultProps={
    name:'小红'}
    render () {
       return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello+{this.props.name}</Text>
    }
}

前提没有在APP.js里申明变量

对变量的属性检查

首先先下载

npm install prop-types --save字体库包

引入

import PropsTest from './propsTest';

static propTypes={
name:String
}
static propTypes={
name:String,
age:Number,
sex:PropTypes.string.isRequired
}
<Text style={{fontSize:20,backgroundColor:'red'}}>Hello+{this.props.sex}</Text>

延展操作符

var p={name:'王依米',
    age:16,
    sex:''}
    return (
        <View style={styles.container}>
        <PropsTest
        name={p.name}
        age={p.age}
        sex={p.sex}
            // name='王依米'
            // age={16}
            // sex=''
         />

        </View>
    );
}
 
var p={name:'王依米',
    age:16,
    sex:''}
    return (
        <View style={styles.container}>
        <PropsTest
        //延展操作符
            {...p}
            
        // name={p.name}
        // age={p.age}
        // sex={p.sex}
            // name='王依米'
            // age={16}
            // sex=''
         />

        </View>
    );
}
  {...p} 一下就把属性传递过去了
 
{/*{...p}*/}不是被注销的意思
state的应用

export  default class State extends Component{
   state ={
     size:80
   }
   constructor (props) {
      super(props);
   }
   render () {
       return (
       <View>
       <Text
           style={{fontSize:20}}
           onPress={() =>{
               this.setState({
                   size:this.state.size+10
               })
           }}
           ></Text>
           <Text
               style={{fontSize:20}}
               onPress={() =>{
                   this.setState({
                       size:this.state.size-10
                   })
               }}
           >fang</Text>
       <Image style={{ width:this.state.size,height:this.state.size}}
              source={require('./timg.jpg')} />
       </View>)
http://www.devio.org博客
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值