Question

我想用Parent中的新道具更新我的子组件。

我的父组件：

 constructor(props) {
    super(props);
    this.state={
        logo:{opacity:1,top:0}
    }
}

componentWillMount(){
    setTimeout(function(){
        this.setState({logo:{
            top:100,
        }});
    }.bind(this),5000);
}

render() {
    return (
        <View style={styles.container}>
          <AnimView  opacity={this.state.logo.opacity} top={this.state.logo.top}>
            <LocalImage
                source={require('./assets/img/logo.png')}
                originalWidth={701}
                originalHeight={330}
                Percentage={1.6}
            />
          </AnimView>
        </View>
    );
}

我的孩子组成部分：

constructor(props) {
    super(props);
    this.state={
        duration: 1000,
        opacity: new Animated.Value(0),
        top: new Animated.Value(0),
        left: new Animated.Value(0),
        right: new Animated.Value(0),
        bottom: new Animated.Value(0),
    }
}
componentDidMount() {
    let duration = this.props.duration ? this.props.duration : this.state.duration;
    Animated.parallel([
        Animated.timing(this.state.opacity,{toValue: this.props.opacity,duration : duration}),
        Animated.timing(this.state.top,{toValue: this.props.top,duration : duration}),
        Animated.timing(this.state.left,{toValue: this.props.left,duration : duration}),
        Animated.timing(this.state.right,{toValue: this.props.right,duration : duration}),
        Animated.timing(this.state.bottom,{toValue: this.props.bottom,duration : duration})
    ]).start();
};

render() {
    return (
        <Animated.View style={{...this.props.style,opacity: this.state.opacity,top:this.state.top,left: this.state.left,right: this.state.right,bottom: this.state.bottom}}>
            {this.props.children}
        </Animated.View>
    );
}

第一个孩子在父母给出的不透明度下淡出。但是我希望它能够在平均时间之后移动顶部或.... 但是我在parentWillMount的父级中给出的新道具并没有改变孩子的状态..？

Answer 1

您需要了解的是，在实例化类时，仅在第一次调用构造函数时。这就是为什么在Child状态依赖于Parent的情况下，如果Parent状态发生变化，状态更改会通过名为componentWillReceiveProps（props）的回调反映给Child。

您的子组件将如下所示：

constructor(props) {
    super(props);
    this.state={
        duration: 1000,
        opacity: new Animated.Value(0),
        top: new Animated.Value(0),
        left: new Animated.Value(0),
        right: new Animated.Value(0),
        bottom: new Animated.Value(0),
    }
}

componentWillReceiveProps(props){
    if(props){
        this.setState({
            duration: 1000,
            opacity: new Animated.Value(0),
            top: new Animated.Value(0),
            left: new Animated.Value(0),
            right: new Animated.Value(0),
            bottom: new Animated.Value(0),
        });
    }
}

componentDidMount() {
    let duration = this.props.duration ? this.props.duration : this.state.duration;
    Animated.parallel([
        Animated.timing(this.state.opacity,{toValue: this.props.opacity,duration : duration}),
        Animated.timing(this.state.top,{toValue: this.props.top,duration : duration}),
        Animated.timing(this.state.left,{toValue: this.props.left,duration : duration}),
        Animated.timing(this.state.right,{toValue: this.props.right,duration : duration}),
        Animated.timing(this.state.bottom,{toValue: this.props.bottom,duration : duration})
    ]).start();
};

render() {
    return (
        <Animated.View style={{...this.props.style,opacity: this.state.opacity,top:this.state.top,left: this.state.left,right: this.state.right,bottom: this.state.bottom}}>
            {this.props.children}
        </Animated.View>
    );
}

因此，每当Parent中的更改反映在Child中时，将调用componentWillReceiveProps，并且您可以使用最新的props更新Child状态。

更新React Child动画组件

1 个答案: