Реагировать на собственный переход maxHeight - PullRequest
Новая
       8

Реагировать на собственный переход maxHeight

0 голосов
/ 01 ноября 2019

Как я могу сделать transition с maxHeight в React Native?

Эквивалентный код в 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?

1 Ответ

0 голосов
/ 05 ноября 2019

Я предполагаю, что вы хотите сохранить анимацию при "открытии" вида. Это не поддерживается "из коробки" с использованием объекта StyleSheet в React Native. Вам придется реализовать это самостоятельно, используя 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>
)
}

Отступы ужасны, извините, но должны дать представление.

...