[英]Can you do transitions in react-native with either inline styles or styled components
Is it possible to do transitions in react native using StyleSheet or styled-components?是否可以使用 StyleSheet 或 styled-components 在 react native 中进行转换? I am trying the following with no luck.我正在尝试以下但没有运气。
import React from 'react'
import styled from 'styled-components/native'
import { Text, View, StyleSheet } from 'react-native'
export default class extends React.Component {
render() {
return (
<Wrapper visible={visible}><Text>hello</Text>
)
}
}
const Wrapper = styled.View`
opacity: ${props => props.visible ? 1 : 0};
transition: opacity 1s linear;
`
const styles = StyleSheet.create({
wrapper: {
opacity: 1,
transition:'opacity 1s linear'
}
});
React Native does not support react style transitions in this way, instead try the RN Animated View library, it works very similarly (and uses inline styles/components): React Native 不支持这种方式的 React 样式转换,而是尝试使用 RN 动画视图库,它的工作方式非常相似(并使用内联样式/组件):
https://facebook.github.io/react-native/docs/animated.html https://facebook.github.io/react-native/docs/animated.html
React Native does support these kind of transitions. React Native 确实支持这些类型的转换。 Here's a quick example:这是一个简单的例子:
<View style={condition ? style.true : style.false} />
true: {
opacity: 1,
transition:'0.5s, transform 0.5s'
},
false: {
opacity: 0
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.