React Native_React Native生命周期

Touchable组件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
   Alert
} from 'react-native';


export default class Test4 extends Component{
    state={
        title:'默认值'
    }

    render(){
        return(
            <View style={styles.container}>
              <TouchableOpacity activeOpacity={0.5} onPress={(e)=>this.click('点击')}
                                onPressIn={()=>this.click('按下')}
                                onPressOut={()=>this.click('抬起')}
                                onLongPress={()=>this.click('长按')}
              >
                  {/*()=>  表示回调，不写会直接触发，属于ES6语法*/}
                 <View>
                    <Text>{this.state.title}</Text>
                  </View>
               </TouchableOpacity>
          </View>
        );
    }

    click(event){

        this.setState({
            title:event
        });
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },

});

• Props 属性 相当于OC中的ReadOnly，只读属性
• state 状态 每个组件有一个系统的setSate方法，用来改变状态，而且会刷新界面(刷新界面就会调用Render()函数 ）

生命周期方法

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
   Alert
} from 'react-native';

export default class Test4 extends Component{
    state={
        title:'默认值'
    }

    //相当于OC中的ViewWillAppear
    componentWillMount() {
        // Alert.alert('WillMount来了');
    }

    //
    render(){
        return(

          <View style={styles.container}>
              {Alert.alert('render来了')}
              <TouchableOpacity onPress={()=>this.click('点击')}>
                  <Text>{this.state.title}</Text>
              </TouchableOpacity>

          </View>
        );
    }

    click(event){
         this.setState({
             title:event
        });
    }
    //在Render之后，刷新UI完以后执行 -- 今后用来发送网络请求（第一次加载的数据）
    componentDidMount() {
        // Alert.alert('DidMount来了');
    }

    //这个方法在刷新UI之后调用，第一次加载UI不会执行
    componentDidUpdate() {
        Alert.alert('DidUpdate(来了)');
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },

});

生命周期练习

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Alert,
  Button,
} from 'react-native';

export default class Test4 extends Component{
    state={
        title:'默认值',
        person:'张三'
    }

    static defaultProps={
        age:18
    }
    //相当于OC中的ViewWillAppear
    componentWillMount() {
        // Alert.alert('WillMount来了');
    }

    //
    render(){
        return(

          <View ref="topView" style={styles.container}>

               <Text>{this.state.person}</Text>
               <Text>{this.props.age}</Text>
               <Button title={'我就是个Button'} color={'red'} onPress={()=>this.click('点了按钮')}></Button>
              {/*<Button title={'我就是个Button'} color={'red'} onPress={btnClick}></Button>*/}
          </View>
        );
    }

    click(event){
         this.setState({
             title:event
        })

        //拿到View
        console.log(this.refs.topView)
    }
    //在Render之后，刷新UI完以后执行 -- 今后用来发送网络请求（第一次加载的数据）
    componentDidMount() {
        // Alert.alert('DidMount来了');
    }

    //这个方法在刷新UI之后调用，第一次加载UI不会执行
    componentDidUpdate() {
        Alert.alert('DidUpdate(来了)');
    }
}

const btnClick = ()=>{
    Alert.alert('btnClick我来了');
}

const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },

});