您可以在react-native中使用内联样式或样式化组件进行过渡吗

2eafrhcq  于 2022-12-30  发布在  React
关注(0)|答案(2)|浏览(139)

在react native中可以使用样式表或样式化组件进行过渡吗?我尝试了以下方法,但没有成功。

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'
  }
});
luaexgnf

luaexgnf1#

React Native不支持这种方式的react样式过渡,而是尝试RN动画视图库,它的工作原理非常相似(并使用内联样式/组件):
https://facebook.github.io/react-native/docs/animated.html

im9ewurl

im9ewurl2#

React Native确实支持这类转换,这里有一个简单的例子:

<View style={condition ? style.true : style.false} />
true: { 
  opacity: 1, 
  transition:'0.5s, transform 0.5s' 
},
false: { 
  opacity: 0 
}

相关问题