React native 移动对象时无法插值颜色

import React，{Component}来自'React'；
从“react native”导入{View，Animated}；
持续时间=250；
类Ball扩展组件{
组件willmount（）{
this.position=新的动画.ValueXY（0,0）；
this.borderC=新的动画.Value（0）；
平行动画([
已设置动画。正时（此位置{
toValue:{x:200，y:500}，
持续时间：动画持续时间
}),
动画。计时（此.c{
toValue:1，
持续时间：动画持续时间，
})
]).start（）；
}
render（）{
常数styl={
球：{
身高：60，
宽度：60，
边界半径：30，
边框宽度：30，
borderColor:this.borderC.interpolate({
输入范围：[0，1]，
输出范围：[“绿色”、“黄色”]，
})
}
}
返回(
);
}
}
导出默认球

需要

边框颜色

转换的第二个

视图

组件应为

动画视图

样本

  render() {
    const style = {
      ball: {
        height: 60,
        width: 60,
        borderRadius: 30,
        borderWidth: 30,
        borderColor: this.borderC.interpolate({
          inputRange: [0, 1],
          outputRange: ['green', 'yellow'],
        })
      }
    }

    return (
      <Animated.View style={this.position.getLayout()}>
        <Animated.View style={styl.ball}/>
      </Animated.View>
    );
  }

render（）{
常量样式={
球：{
身高：60，
宽度：60，
边界半径：30，
边框宽度：30，
borderColor:this.borderC.interpolate({
输入范围：[0，1]，
输出范围：[“绿色”、“黄色”]，
})
}
}
返回(
);
}
我认为它们在
这个.position.getLayout下是混合的，可以一起呈现。显然需要在不同的视图上处理这两个动画