如何使用 React-Native 进行这种转换? [英] How to make this transform with React-Native?

问题描述

我尝试使用 style.transform 属性但是我无法进行转换，没有那么多文档，正在哭泣...

i try to use style.transform attribute but i can't make the transform, there is not so many doc , crying ...

这里是css3代码:

变换:translateZ(-100px) translateX(-24%) translateY(0)旋转Y(60度);

transform: translateZ(-100px) translateX(-24%) translateY(0) rotateY(60deg);

推荐答案

这是一个非常接近的结果:

Here is a pretty close result:

render() {
  return (
    <View style={styles.container}>
      <View style={styles.child} />
    </View>
  )
},

var styles = StyleSheet.create({
  container: {
      backgroundColor:'green',
      flex: 1,
  },
  child: {
    flex: 1,
    backgroundColor: 'blue',
    transform: [
      { perspective: 850 },
      { translateX: - Dimensions.get('window').width * 0.24 },
      { rotateY: '60deg'},

    ],
  }
});

查看完整示例:https://rnplay.org/apps/Qg7Bhg

这篇关于如何使用 React-Native 进行这种转换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！