如何在reactnative中使用动画将点击时的组件扩展至全屏宽度和高度

Question

我尝试通过使用react-native中的布局动画来实现react-native中组件扩展到全屏，但看起来不太好。任何人都可以帮我得到它吗？

changeLayout = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: !this.state.expanded });
}; 

我希望在单击时将组件展开到全屏，然后在单击时再次折叠它。

Answer 1

通过 设置你想要的初始值animation，获取屏幕width和height，并创建一个click function执行。

这是example我做的一个。如果您想自己运行，请单击此链接。

import React from 'react';
import { Animated, Text, View,Dimensions,Button } from 'react-native';

const screenwidth = Dimensions.get('screen').width
const screenheight = Dimensions.get('screen').height
class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(50),  
    fadeAnim2: new Animated.Value(50),
  }

  componentDidMount() {
  }

  animatebutton() {
      Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: screenheight,                
        duration: 10000,              // Make it take a while
      }
    ).start();     
        Animated.timing(                  // Animate over time
      this.state.fadeAnim2,            // The animated value to drive
      {
        toValue: screenwidth,                  
        duration: 10000,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { fadeAnim,fadeAnim2 } = this.state;

    return (
      <Animated.View                 // Special animatable View
        style={{
          ...this.props.style,
          height: fadeAnim, 
          width : fadeAnim2     
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
    }
  }
  animatebutton(){
    this.fade.animatebutton();
  }

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} >
        <FadeInView style={{backgroundColor: 'powderblue'}} ref={ani => this.fade = ani}>
          <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
        </FadeInView>
        <Button title="go animate" onPress={() => this.animatebutton()}/>
      </View>
    )
  }
}

或者

您可以使用LayoutAnimation您想使用的。看看我的例子。

import React, {Component} from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  LayoutAnimation,
} from 'react-native';

class App extends Component {

  constructor() {
    super();

    this.state = {
      check: false,
    }
  }

  onPresscheck() {

    // Uncomment to animate the next state change.
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

    // Or use a Custom Layout Animation
    // LayoutAnimation.configureNext(CustomLayoutAnimation);

    this.setState({ check : !this.state.check});
  }

  render() {

    var middleStyle = this.state.check === false ? {width: 20,height:20} : {width: "100%",height:"100%"};

    return (
      <View style={styles.container}>
      <TouchableOpacity  style={styles.button} onPress={() => this.onPresscheck()}>
        <Text>pressbutton</Text>
      </TouchableOpacity>
            <View style={[middleStyle, {backgroundColor: 'seagreen'}]}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    width:"100%",
    height: 60,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 8,
  },
});

export default App;