你可以使用内联样式或样式组件在react-native中进行转换吗

Question

是否可以使用 StyleSheet 或样式组件在 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'
  }
});

Answer 1

React Native 不支持以这种方式进行反应样式转换，请尝试使用 RN Animated View 库，它的工作原理非常相似（并且使用内联样式/组件）：

https://facebook.github.io/react-native/docs/animated.html

Answer 2

React Native 确实支持此类转换，但仅限于网络。如果您在其他地方渲染，则需要使用不同的方法。

以下是如何在 React Native Web 中执行此操作的快速示例：

<View style={condition ? style.true : style.false} />

true: { 
  opacity: 1, 
  transition:'0.5s, transform 0.5s' 
},
false: { 
  opacity: 0 
}