02 ReactNative 入门简要语法

常用语法

变量定义

• 还是之前那份代码 完整App.js在最后，在updateNum中加入一段循环,注意各种分号和括号。

 updateNum(newNum){
    this.setState((state) => {
      console.log('update has been exec');
      var a =[];
      for (let index = 0; index < 10; index++) {
        a[index] = function(){
          console.log(index);
        } ;       
      }
      a[6]();

      return {
        inputNum:newNum,
      };});
  }

• 在for循环中，如果使用let，调用a[6] (),打印的是结果是6，如果用var index，那么结果是10.
• let 相当于是个局部变量，var则有点全局的意思。
• const表示常量，声明后不能改变。
• 如果需要外部使用常量，使用export const
• 在ES6中，一方面规定，var、function命令声明的全局变量依旧是全局对象的属性；一方面规定，let、const、class命令声明的全局变量不属于全局对象的属性。。。

函数

• ES6中允许使用箭头函数（=>）

var f = v=>v;
等同于：
var f = function(v){
    return v;  
};

如果函数不需要参数，也可以写成
var f = () => 5;
等同于
var f = function(){
    return 5;  
};

由于大括号可以表示代码块也可以表示对象，所以如果直接返回一个对象，需要再加上小括号
var getItem = id =>({id:id,name:'temp'});
等价于
var getItem = function(id){
  return {id:id,name:'temp'};
};

• 箭头函数的注意事项

1. 函数体内的this对象就是定义时所在的对象，不是使用时所在的对象。
2. 不能做构造函数，不能做arguments对象，不能用yield命令
3. 在App.js中，把第一个onChangeText = {(newNum)=>this.updateNum(newNum)}换成onChangeText = {this.updateNum}，然后在render函数的return语句前加上

在render函数的return语句前加上
console.log('render exec');
console.log(this);

在updateNum中添加语句
updateNum(newNum){
    console.log(' updateNum has been exec'); 
    console.log(this);
    this.setState((state) => {      
      return {
        inputNum:newNum,
      };});
  }

4. 运行时会首先打印出App，就是当前的this，输入文字是会调用updateNum方法，会出现红屏，打印出一个对象

 App {props: Object, context: Object, refs: Object, updater: Object, state: Object, …}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: , …}
_reactInternalInstance: Object {_processChildContext: }
context: Object {}
isMounted: undefined
props: Object {rootTag: 191}
refs: Object {}
replaceState: undefined
state: Object {inputNum: "", password: ""}
updater: Object {isMounted: , enqueueSetState: , enqueueReplaceState: , …}
__proto__: App {constructor: , updateNum: , updatePW: , …}

Object {style: 4, placeholder: "请输入手机号", onChangeText: , allowFontScaling: true}
index.bundle:60224
allowFontScaling:true
onChangeText:function updateNum(newNum) { … }
placeholder:"请输入手机号"
style:4
__proto__:Object {constructor: , __defineGetter__: , __defineSetter__: , …}

5. 在ES6中，箭头函数中，this的指向是固定的，非箭头函数this的指向是会变化的。所以，可以参照updatePW的方式，在构造中使用bind(this)绑定this对象，保证this不变。（目前也就只能理解到这个程度了）

回调方法的四种写法

1. onChangeText = {(newNum)=>this.updateNum(newNum)} 不需要绑定
2. onChangeText = {this.updateNum} 需要bind绑定
3. updateNum = (newNum) =>{...} 这样调用onChangeText = {this.updateNum} 不需要绑定
4. onChangeText = {this.updateNum.bind(this)} 不需要在构造函数中绑定，但是每次render时都会执行一次bind。

属性

1. 关于属性props，参见RN中文网的说明 属性

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

2. <>尖括号表示一个控件，这里是Image，source和style都是Image的属性，并分别赋值。

状态State

1. 参见状态

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

2. 通常状态在构造函数中设定，表示会发生变化的数据。props通常一经指定（在生命周期内）就不再变化。上述例子中，文字内容是个属性，而显示或隐藏是状态。

样式

1. 参见样式
2. 在<Image source={pic} style={{width: 193, height: 110}} />中，是直接指定的宽高，但实际应用中，通常样式都比较多而且复杂，需要使用StyleSheet.create()

重新分析下之前的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//从react和ReactNative中导入组件
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  AppRegistry,
  Dimensions,
  PixelRatio,
  TextInput
} from 'react-native';

// 定义常量
const {height,width} = Dimensions.get('window');
const pixelRatio = PixelRatio.get();
// 间距 局部变量
let widthOfMargin = Dimensions.get('window').width*0.05;

type Props = {};
// 可供外部使用的类
export default class App extends Component<Props> {
// 构造函数，定义状态
  constructor(props){
    super(props);
    this.state = { 
      inputNum:'',
      password:''  
    };
  }

// 改变文字（内容）的方法
   updateNum(newNum){
    this.setState((state) => {
      console.log('update has been exec');
      return {
        inputNum:newNum,
      };});
  }

  updatePW(newPW){
    this.setState(
      () => {
        return {password : newPW,};
      }
    );
  }

// 渲染，返回一个组件
  render() {    
    console.log('render exec');
    return (
      <View style = {styles.container}>
        <TextInput style = {styles.textInputStyle}
          placeholder = {'请输入手机号'} 
          onChangeText = {(newNum)=>this.updateNum(newNum)}
          />
        <Text style = {styles.textStyle}>
           输入的手机号：{this.state.inputNum}
        </Text>
        <TextInput style = {styles.textInputStyle}
          placeholder = {'请输入密码'}
          password = {true}
          />
        <Text style = {styles.bigTextStyle}>
          确定
        </Text>
      </View>
    );
  }
}

// 定格多个样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',// 内部的控件会居中
    // alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textInputStyle: {
    fontSize: 20,
    textAlign: 'center',  // 文字会居中
    backgroundColor: 'yellow',
    margin: widthOfMargin,
  },
  textStyle: {
    margin: widthOfMargin,
    // textAlign: 'center',
    color: '#333333',
    marginBottom: 10,
    fontSize:18,
  },
  bigTextStyle:{
    margin:widthOfMargin,
    backgroundColor:'green',  // 背景颜色
    textAlign:'center',
    color:'red',  // 文字颜色
    fontSize:30   //文字尺寸
  }
});