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

Question

我试过在react-native中使用Layout动画来实现react-native中的组件展开全屏，但是效果不佳。谁能帮我搞定？

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

我希望在点击时将组件展开为全屏并在点击时再次折叠它。

Answer 1

请参考这篇博文：

https://dev-yakuza.github.io/en/react-native/react-native-animatable/

此外，尝试使用此 library。使用您想要的任何动画类型并渲染它们。

编码愉快:)

Answer 2

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

这是我制作的example。如果您想自己运行，请单击this link。

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。 Look at my example.

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;

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

how to expand a component on click to full screen width and height with animation in reactnative

react-native

react-animated