如何使用 React Native Animate 将视图 flex 从 0 更改为 1

Question

我在另一个视图中有两个视图，该视图具有默认的 flexDirection 样式，因此它是柱状的。当用户单击底部视图中的项目（下面标记的选项）时，我希望顶部视图的动画大小与底部视图相同，并显示所选选项的详细信息。

state = {
    animation: new Animated.Value(0)
}

...

<View style={{flex: 1}}>
  <Animated.View style={{ flex: this.state.animation}}>
      {...details}
  </Animated.View>
  <View style={{flex:1}}>
      {...options}
  </View>
</View>

我正在使用以下方法更改值以将 flex 增长到 1。

onPress = () => {
    Animated.timing(this.state.animation, {
        toValue: 1,
        duration: 1000
    }).start()
}

我遇到的问题是没有动画，无论我设置的持续时间如何，它都会立即出现。

Answer 1

这在世博会上对我有用：

export default class App extends React.Component {

state = {
    animation: new Animated.Value(0)
}

onPress = () => {
    Animated.timing(this.state.animation, {
        toValue: 100,
        duration: 1000
    }).start()
}

  render() {
    return (
     <TouchableOpacity style={{flex: 100}} onPress={this.onPress}>
       <Animated.View style={{ flex: this.state.animation, backgroundColor:'blue'}}>
       </Animated.View>
       <View style={{flex:100, backgroundColor:'red'}}>
      </View>
    </TouchableOpacity>
    );
  }
}

这是一个工作示例：https : //snack.expo.io/S1t5OaWL7

但我想是的，height为表演制作动画更安全。不确定如何flex解释。