Android：ReactNative语法基础（下）

Prop

Prop能够理解为组件中的属性，它能够经过外界传递进来的参数，相似于构造函数的参数

一、属性参数

使用自定义组件的时候，传递参数到自定义组件中

<View>
    <PropsText
        name = "小明",
        age = 18
    />
</View>
复制代码

二、默认属性

在React中能够提供默认参数defaultProps属性

class PropsText extends Component{
    
    static defaultProps = {
        name: "小俊",
        age: 18
    }
    
    render(){
        <Text>Hello{this.props.name}</Text>
    }
}
复制代码

三、属性检测

在React中的参数中能够增长类型判断propTypes属性，若是类型不许确，则会报错通知开发者

class PropsText extends Component{
    
    static defaultProps = {
        name: "小俊",
        age: 18
    }
    
    static propTypes = {
        name:PropTypes.string,
        number:PropTypes.number.isRequired
    }
    
    render(){
        <Text>Hello{this.props.name}</Text>
    }
}
复制代码

State

State能够理解为组件中的成员变量，经过改变成员变量的值去更新组件

一、初始化State

经过**getInitialState()**初始化state，在组件的生命周期中仅执行一次

getInitialState(){
    return {
        favorite:false
    };
}
复制代码

二、更新State

经过this.setState()方法来更新state，组件就会从新渲染，执行render()

handleClick:function(event){
    this.setState({
        favorite:!this.state.favorite
    });
},

render(){
    var text=this.state.favorite? 'favorite':'un favorite';
    return (
      <div type='button' onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
}
复制代码

ref

ref能够做为Dom节点的标识，能够获取到某个Dom节点

一、获取组件实例

<View>
    <Text onPress={()=>{
        this.refs.refText  //获取组件实例
        this.refs[refText] //获取组件实例
    }}
    <Text ref="refText"/>
</View>
复制代码

二、获取组件方法

<View>
    <Text onPress={()=>{
        this.refs.refText.getSize();  //获取组件方法
        this.refs[refText].getSize(); //获取组件方法
    }}
    <Text ref="refText"/>
</View>
复制代码

this

在方法中使用this对象，会报错找不到，缘由是这里的this指的是当前**_onPressItem**方法中的对象

_onPressItem() {
    let navigator = this.props.navigator;
}
复制代码

解决方法是在构造函数中将当前的方法的this对象进行绑定

constructor(props) {
    super(props);

    this.state = {}
    this._onPressItem = this._onPressItem.bind(this);
}
复制代码

或者在使用该方法的时候直接使用箭头函数，能自动将this对象进行绑定

<TouchableOpacity onPress={()=>{
    let navigator = this.props.navigator
}}>

</TouchableOpacity>
复制代码

组件方法

一、render()

该方法表示组件建立的时候进行渲染的回调函数。它会检测this.props和this.state，并返回一个单子级组件

二、getInitialState()

该方法表示初始化组件状态，在组件挂载以前调用一次

三、getDefaultProps()

该方法表示设置组件属性的默认值，在组件类建立的时候调用一次

四、propTypes

该对象用于验证传入到组件的props的类型

五、statics

该对象容许你定义静态的方法，这些静态的方法能够在组件类上调用。这些方法不能获取组件的props和state。若是你想在静态方法中检查props的值，在调用处把props做为参数传入到静态方法

class MyComponent extends Componet{
  
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  }
  
  render: function() {
  
  }
}
复制代码

六、displayName

该字符串用于输出调试信息

七、isMounted()

该方法一般用于异步任务完成后修改state前的检查，以免修改一个没有被渲染的组件的state。当组件被渲染到DOM，该方法返回true，不然返回false

组件生命周期

一、Mounting(装载)

• getInitialState(): 在组件挂载以前调用一次。返回值将会做为this.state的初始值
• componentWillMount()：服务器端和客户端都只调用一次，在初始化渲染执行以前马上调用
• componentDidMount()：在初始化渲染执行以后马上调用一次，仅客户端有效

二、Updating(更新)

• componentWillReceiveProps()：在组件接收到新的props的时候调用
• shouldComponentUpdate()：在接收到新的props或者state
• componentWillUpdate()：在接收到新的 props 或者 state 以前马上调用
• componentDidUpdate()：在组件的更新已经同步到DOM中以后马上被调用

三、Unmounting(移除)

• componentWillUnmount()：在组件从DOM中移除的时候马上被调用

四、完整生命周期

持久化存储

一、基础使用

ReactNative提供AsyncStorage用于持久化保存key-value

• static getItem(key: string, callback:(error, result))：根据键来获取值，获取的结果会在回调函数中
• static setItem(key: string, value: string, callback:(error))：根据键来设置值
• static removeItem(key: string, callback:(error))：根据键来移除项
• static mergeItem(key: string, value: string, callback:(error))：合并现有值和输入值
• static clear(callback:(error))：清除全部的项目
• static getAllKeys(callback:(error, keys))：获取全部的键
• static flushGetRequests()：清除全部进行中的查询操做
• static multiGet(keys, callback:(errors, result))：获取多项数据，keys是字符串数组
• static multiSet(keyValuePairs, callback:(errors))：设置多项，keyValuePairs是字符串的二维数组
• static multiRemove(keys, callback:(errors))：删除多项，keys是字符串数组
• static multiMerge(keyValuePairs, callback:(errors))：多个键值合并，keyValuePairs是字符串的二维数组

二、封装使用

import {
   AsyncStorage
}from 'react-native';

export default class StorageUtils{

	static get(key) {
       	return AsyncStorage.getItem(key).then((value) => {
         	const jsonValue = JSON.parse(value);
         	return jsonValue;
        });
 	}
 	
 	static save(key, value) {
 		return AsyncStorage.setItem(key, JSON.stringify(value));
 	}
 	
 	static update(key, value) {
 		return DeviceStorage.get(key).then((item) => {
         	value = typeof value === 'string' ? value : Object.assign({}, item, value);
            return AsyncStorage.setItem(key, JSON.stringify(value));
        });
 	}
 	
 	static delete(key) {
 		return AsyncStorage.removeItem(key);
 	}
}
复制代码

布局

一、像素

在React Native中尺寸是没有单位的，它表明了设备独立像素。运行在Android上时，长和宽的尺寸单位被解释为dp，字体的尺寸单位被解释为sp，运行在iOS上时，尺寸单位被解释为pt

二、flexBox

约束父视图的属性

• flexDirection：属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式
• flexWrap：属性定义了子元素在父视图内是否容许多行排列，默认为nowrap
• justifyContent：属性定义了子元素的主轴的对齐方式
• alignItems：属性定义了子元素的侧轴的对齐方式

约束子视图的属性

• alignSelf：属性定义了flex容器内被选中项目的对齐方式
• flex：属性当前元素的位置的占比权重，默认为0

其余属性

• 尺寸：能够定义容器的宽高
• 边框：能够定义容器的上下左右的边框和颜色
• 内边距：能够定义容器的上下左右的内边距
• 外边距：能够定义容器的上下左右的外边距
• 定位：能够定义容器的绝对位置或相对位置

调试

一、日志调试

能够经过不一样级别的日志就行输出调试

console.warn()
console.error()
复制代码

二、Chrome调试

在开发中遇到最大的问题是Window下的Chrome调试，尝试了好久后终于找到可调试的办法

• 摇一摇打开调试菜单，选择Debug JS Remotely
• 在弹出来的Chrome中将ip地址改成localhost，刷新Chrome
• 摇一摇打开调试菜单，选择Reload
• F12打开开发者界面，进行断点调试