Hello React-Native

导入

引入react 的 Component 抽象组件

import React,{Component} from 'react';

引入react-native 的Text,View具体组件，使用组件后，代码高亮

import {
    Text,
    View
} from 'react-native';

引入自定义组件 以及 变量，方法
在组件名后，用{}包裹变量，方法

import CustomComponent,{name,age,sumNumber} from './CustomComponent';
import PropsComponent from './PropsComponent'
import StateComponent from './StateComponent'

导出

export default 是导出
class ... extends 定义继承 Component 的组件
render() 渲染

export default class GrammarComponent extends Component{
    render() {
      return(
          <View>
              <CustomComponent
                  name = 'iOSCoderZhao'
              />
          </View>
      );
    };
}

变量，常量，方法

定义变量

var name = '小明';
var age = '12';

定义常量

const phoneNumber = '110';

定义方法

function sun(a,b) {
    return a + b;
}

导出变量，批量导出

导出变量

export var sex = '男';
export var name = '老师';

批量导出

export {phoneNumber,age};

导出方法

export function sumNumber(a,b) {
    return a + b;
}

组件生命周期

// 组件的生命周期
export default class CustomComponent extends Component{

    // 最开始调用初始化 (第一步)
    constructor(props){
        super(props)
        console.log('---constructor---')
    }
    // 将要被装载 （第二部）
    componentWillMount(){
        console.log('---componentWillMount---')

    }
    // 被装载之后 (第四步)
    componentDidMount(){
        console.log('---componentDidMount---')

    }
    //组件在更新的时候调用方法
    componentWillReceiveProps(nextProps){
        console.log('---componentWillReceiveProps---')

    }
    // 组件是否需要更新
    shouldComponentUpdate(nextProps,nextState){
        return true;
        console.log('---shouldComponentUpdate---')

    }
    // 组件在更新之前
    componentWillUpdate(nextProps,nextState){
        console.log('---componentWillUpdate---')

    }
    // 组件在跟新之后
    componentDidUpdate(prevProps,prevState){
        console.log('---componentDidUpdate---')

    }
    // 组件被移除之前
    componentWillUnmount(){
        console.log('---componentWillUnmount---')

    }
    // 渲染 （第三步）
    render(){
      return(
          <Text>欢迎来到自定义组件.{this.props.name}</Text>
      );
    };
}

props属性

props 是属性，用来描述组件的，通常是其他组件传递过来的

默认属性 （类似于OC 中定义默认值）

    static defaultProps = {
        name:'小红',
        age: 50
    }

属性检查，定义属性的类型

    static propTypes = {
        // 这里定义name 是string类型
        name:PropTypes.string,
        age:PropTypes.number,
        // 表示性别是必须传递的
        sex:PropTypes.isRequired
    }

使用

  render() {
        return(
            <Text style = {{fontsize:20,backgroundColor:'red'}}>姓名：{this.props.name}, 年纪: {this.props.age}，性别：{this.props.sex}</Text>

    );

state

通常用来交互

state (状态机)的定义方式

    constructor(props) {
     super(props)
     this.state={
         size:80
     }
 }
 // 方式二
  state = {
      size:80
  }

使用

 <Text
       style={{fontsize:20}}
             onPress={()=>{
                 this.setState({
                     size:this.state.size+10
                 })
             }}