React Native Animation Basic

Question

所以我正在用Expo练习React Native的动画或动画。我正在尝试使用Animated从下到上打开屏幕。

当我按下class App extends React.Component { state = { openHome: false } animation = new Value(0); openHome = () => { this.setState({ openHome: true }) Animated.timing(this.animation, { duration: 300, toValue: 1 }).start(); } render () { const {animation} = this; const translateY = animation.interpolate({ inputRange: [0, 1], outputRange: [-height, 0], easing: Easing.inOut(Easing.ease) }); return ( <View style={styles.container}> <Text onPress={this.openHome}>Open up Home to start working on your app!</Text> { <Animated.View style={{ transform: [{ translateY }] }}> <Home open={this.state.openHome}/> </Animated.View> } </View> ); } } 时，它将在父组件的顶部显示另一个屏幕，动画从下至上。

但这是我得到的输出：

我想要得到的输出：

这是我的代码：

Home.js

我的子组件的代码为const Home = props => { if (!props.open) { return ( <View style={styles.firstContainer}> </View> ); } else { return ( <View style={styles.secondContainer}> <Text>Hello</Text> </View> ); } } const styles = StyleSheet.create({ firstContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', width: '100%' }, secondContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', width: '100%', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } }) ：

{{1}}

Answer 1

如果要设置值的动画，则首先需要new Animated.Value(0)而不是new Value(0)。