react native：如何编写附加为 css 的代码样式来响应原生？答案

【问题标题】：react native : How can I write the code style attached as css to react native?react native：如何编写附加为 css 的代码样式来响应原生？
【发布时间】：2021-02-14 14:24:40
【问题描述】：

如何编写作为 CSS 附加的代码样式以响应原生？我想知道如何将以下代码修复为 react native 的标准代码


    Btn {
      width: 50px;
      height: 50px;
      border: 1px solid ('pink');
      border-radius: 50%;
      cursor: pointer;
      transition: all ease-in-out 0.7s;
      outline: none;
    },

btn2 {
  transform: scale(1.2) rotate(360deg);
  background-color: rgb(209, 15, 15);
}

【问题讨论】：

使用这个github.com/styled-components/styled-components，但要知道并非所有样式都受支持；查看它的 react 原生样式，并确保在 iOS 和 android（主要是 iOS）中进行测试
你能帮我把我的风格转移到上面吗？
上面的代码可能不需要使用样式组件库做任何额外的工作
它不起作用..
给我看点心..

标签： javascript css reactjs react-native

【解决方案1】：

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    Btn {
      width: 50;
      height: 50;
      borderWidth: 1;
      borderColor: 'pink',
      borderRadius: 50/2;
      //cursor: pointer; //don't need this as it's mobile platform
     // transition: all ease-in-out 0.7s; //react native does not support css animation
      outline: 'none';
    },

    btn2 {
      transform: [
        { rotate: '360deg' },
        { scale: 1.2},
      ],
      background-color: 'rgba(209, 15, 15, 1)';
    }
});

动画见这个 - https://reactnative.dev/docs/easing

【讨论】：

那么我如何在那里制作动画而不是过渡？你能帮我吗？
默认不支持按钮动画，但文本和视图支持，所以这取决于你想要什么样的动画。这是你必须自己玩的东西。您也可以将按钮包含在视图中并尝试。先从reactnative.dev/docs/animations 运行示例代码，看看它是如何工作的。