react native basic grammar 2

One, props

parent component

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}/>
    )
  }
}

Subassembly

//引入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>
     )
   }
 }
 

Two, State

A small case of blowing a balloon to demonstrate changing the state to re-render the page

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>
        )
    }
}