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

【问题标题】：How to use React Native Animate to change view flex from 0 to 1如何使用 React Native Animate 将视图 flex 从 0 更改为 1
【发布时间】：2019-01-22 11:03:18
【问题描述】：

我在另一个视图中有两个视图，它具有默认的 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()
}

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

【问题讨论】：

您是否尝试将基本 flex 大小设置为 100 而不是 1？你的容器视图和其他固定视图？
您也可以尝试使用百分比或Dimensions...
并尝试将 flex 从 0 设置为 100。我现在很好奇 :)
0 到 100 做了同样的事情，它只是立即出现而不是动画
它似乎对我有用：snack.expo.io/Byu8w6-Um

标签： css reactjs react-native flexbox

【解决方案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。

【讨论】：

你说得对，我发现它为什么不适合我。在动画功能之后，我正在做this.setState({ animation: new Animated.Value(100) })，以便稍后我可以反转动画以隐藏细节。我需要做的是在动画执行后使用回调设置状态。 Animated.timing(...).start(() => { this.setState({ animation: new Animated.Value(100)}) })

【解决方案2】：

嗯，我不确定 flex 是否可以设置动画，但是您可以使用 height 来代替 flex。您可以使用 Dimensions.get('window').height 来获取值，并在此基础上制作动画。

【讨论】：

我相信会是Dimensions.get('window').height