React Native 转换 maxHeight答案

【问题标题】：React Native transition maxHeightReact Native 转换 maxHeight
【发布时间】：2020-02-27 07:39:04
【问题描述】：

如何在 React Native 中使用 maxHeight 创建 transition？

React 中的等效代码是

function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="App">
      <div className={`collapsible ${isOpen ? 'opened' : ''}`}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Close' : 'Open'}
      </button>
    </div>
  );
}

还有 css

.collapsible {
  max-height: 0;
  transition: max-height 0.35s ease-out;
  overflow: hidden;
}

.opened {
  max-height: 200px;
}

这是一个有效的codesandbox

我怎样才能在 React Native 中做同样的事情？

【问题讨论】：

标签： reactjs react-native styled-components

【解决方案1】：

我的猜测是您希望在“打开”视图时保留动画。在 React Native 中使用 StyleSheet 对象不支持开箱即用。您必须使用 Animated API 自行实现。

https://facebook.github.io/react-native/docs/animations

例子：

 import React from "react"
 import { Animated } from "react-native"
 import { Text, StyleSheet, TextProps } from "react-native"
 import { TouchableOpacity } from "react-native-gesture-handler"
 class AnimatedComponent {

constructor(props){
super(props)
this.state = { open: false }
this.animatedHeightValue = new Animated.Value(0)


}

_triggerAnimation = () => {
  Animated.timing(this.animatedHeightValue, {
      toValue: this.state.open ? 0 : 200,
      duration: 200
  }).start(() => {
      this.setState({open: !this.state.open})
  })
}

render() {
return(
<View>


  <Animated.View style={{height: this.animatedHeightValue, backgroundColor: "blue"}}>
    <Text>
        {"Hello world"}
    </Text>
  </Animated.View>

  <TouchableOpacity onPress={this._triggerAnimation}>
  <Text>
        {"Press for magic"}
    </Text>
  </TouchableOpacity>
  </View>
)
}

缩进很抱歉，但应该给出一个想法。

【讨论】：

我知道我需要使用Animeted，但我正在寻找的是如何实现它。你知道怎么做吗？

【解决方案2】：

嗯.. 我不完全确定您是否真的是这个意思。但如果我们在同一页面上，请查看我的小吃：https://snack.expo.dev/@zvona/maxheight-animation

这是实际代码（以防零食链接被弃用）：

import React, { useState, useRef } from 'react';
import {
  Animated,
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
} from 'react-native';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [contentStyle, setContentStyle] = useState({ visibility: 'hidden' });
  const currentHeight = useRef(new Animated.Value(0)).current;
  const [maxHeight, setMaxHeight] = useState(0);

  const toggleContent = () => {
    setIsOpen(!isOpen);

    Animated.timing(currentHeight, {
      toValue: isOpen ? 0 : maxHeight,
      duration: 350,
    }).start();
  };

  const getContentHeight = ({ nativeEvent }) => {
    if (maxHeight !== 0) {
      return;
    }

    const { height } = nativeEvent.layout;

    setMaxHeight(height);
    setContentStyle({visibility: 'visible', height: currentHeight });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={toggleContent} style={styles.button}>
        <Text>{'Open'}</Text>
      </TouchableOpacity>
      <Animated.View
        style={[styles.content, contentStyle]}
        onLayout={getContentHeight}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to
          get a shareable url.
        </Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    padding: 8,
  },

  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 120,
    borderWidth: 1,
    borderColor: 'black',
    backgroundColor: '#c0c0c8',
    padding: 10,
  },

  content: {
    borderWidth: 1,
    borderColor: 'blue',
    overflow: 'hidden',
  },

  paragraph: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default App;

检测 maxHeight 的关键因素是在 Animated.View 的 onLayout 事件中。然后是通过状态处理显示内容的一些魔法。

如果您想手动定义 maxHeight，那么只需撕掉 getContentHeight。

【讨论】：