css - 如何使用 React Native Animate 将 view flex 从 0 更改为 1

Question

我在另一个 View 中有两个 View ，该 View 具有默认的 flexDirection 样式，因此它是柱状的。当用户单击底部 View 中的元素(下面标记的选项)时，我希望顶部 View 动画化为与底部 View 大小相等，并显示所选选项的详细信息。

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 是如何解释的。