ReactNative自定义控件状态更新的正确姿势

来源：互联网发布：数据库冗余编辑：程序博客网时间：2024/06/08 05:05

ReactNative自定义控件状态更新的正确姿势

我们经常要自定义一个ReactNative控件,而在Render()方法中会用到组件的属性，而这些属性不能即时更新，导致界面不能刷新。举例如下:

比如我们定义了一个按钮组件，这个组件外部会指定一个颜色，我们在构造方法中初始化当前的属性borderColor为this.props.borderColor;

'use strict'import React, {Component} from 'react';import {    View, Text, TouchableOpacity} from 'react-native';export default class Button extends Component {    constructor(props) {        super(props);        this.state = {            borderColor : this.props.borderColor || "#FF0000"        }    }    componentWillReceiveProps(nextProps) {        if(nextProps.borderColor != this.borderColor){            this.setState({                borderColor : nextProps.borderColor            });        }    }    render() {        return (<TouchableOpacity onPress = { this.props.onPress }>            <View style={ [{                borderWidth: 1,                borderColor: this.state.borderColor,                justifyContent:"center",            }, this.props.style]}>                <Text style = {                    {                    textAlign : "center",                    textAlignVertical: "center" ,                    alignSelf:"center",flex:1} } >                    { this.props.text }                </Text>            </View>        </TouchableOpacity>);    }}

阅读全文

0 0