Android开发经验谈Android开发技术干货

Android：ReactNative语法基础（下）

2019-05-13  本文已影响10人  987edf3ecfa4

Prop

Prop可以理解为组件中的属性，它可以通过外界传递进来的参数，类似于构造函数的参数

1、属性参数

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

<View>
    <PropsText
        name = "小明",
        age = 18
    />
</View>

2、默认属性

在React中可以提供默认参数defaultProps属性

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

3、属性检测

在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可以理解为组件中的成员变量，通过改变成员变量的值去更新组件

1、初始化State

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

getInitialState(){
    return {
        favorite:false
    };
}

2、更新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节点

1、获取组件实例

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

2、获取组件方法

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

组件方法

1、render()

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

2、getInitialState()

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

3、getDefaultProps()

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

4、propTypes

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

5、statics

该对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。这些方法不能获取组件的props和state。如果你想在静态方法中检查props的值，在调用处把props作为参数传入到静态方法

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

6、displayName

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

7、isMounted()

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

组件生命周期

1、Mounting(装载)

2、Updating(更新)

3、Unmounting(移除)

4、完整生命周期


持久化存储

1、基础使用

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

2、封装使用

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

布局

1、像素

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

2、flexBox

约束父视图的属性

约束子视图的属性

其他属性

调试

1、日志调试

可以通过不同级别的日志就行输出调试

console.warn()
console.error()

2、Chrome调试

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

上一篇下一篇

猜你喜欢

热点阅读