react-native - 如何将一个组件动画到另一个组件？

Question

我想为游戏桌上的卡片制作动画。如何将卡片的组件移动到游戏桌的组件？ 我尝试使用的Onpress 结果：

    this.state.cards.find(c => c.id == id).ref.layout.animate({
      from: { bottom: -20, bottom: 0 },
      to: { bottom: 416, bottom: 196 },

但是 .animate 方法是基于父视图的 x 和 y 而不是屏幕的 xy。这是我的代码的一部分：

  <View style={styles.board}>
            <ImageBackground source={require('../../assets/ornement.png')} resizeMode='contain' style={styles.ornement}>
              <View onLayout={ref => this.test = ref}>
                <Text style={boardStyle.message}>Test</Text>
              </View>
              <View style={boardStyle.boardContent} ref={event => this.view = event}>
                {this.state.board.map((r, i) => <Image key={i} style={boardStyle.image} resizeMode='contain' source={CardUtils.PathOfimgCard(r.fullName)} />
                )}
              </View>
            </ImageBackground>
          </View>

          <View style={styles.deck}>

            {this.state.deck.map((r, i) =>
              <Card onRef={(ref) => this.state.cards.push({ id: r.id, ref: ref })} key={i} ctx={r} action={this.play} select={this.state.cardSelect.find(c => c.id == r.id) != null} id={r.id} path={CardUtils.PathOfimgCard(r.fullName)} style={deckStyle} />
            )}
          </View>

卡片组件：

            <Animatable.View ref={event => this.layout = event} iterationCount={3} delay={5000} direction="alternate" style={this.props.style.touchZone}   >

                <TouchableOpacity onPress={() => this.props.action(this.props.id)} >
                    <View ref={event => this.view = event}>
                        <ImageBackground source={this.props.path} style={this.props.select ? this.props.style.active : this.props.style.image} resizeMode='contain' >
                            {!this.props.ctx.canPlay ? <Image style={[this.props.select ? this.props.style.active : this.props.style.image, styles.image]} resizeMode='contain' source={require('../../assets/black.png')} /> : <Image></Image>}
                        </ImageBackground>
                    </View>
                </TouchableOpacity>
            </Animatable.View>

先感谢您

标签： react-native