如何不使用styleSheet本机元素将CSS文件添加到react-native应用程序中

Question

我需要将纯CSS文件添加到react-native android和ios应用中。 如何不使用styleSheet本机元素来解决此问题？

body {
   margin: 25px;
   background-color: rgb(240,240,240);
   font-family: arial, sans-serif;
   font-size: 14px;
}

h1 {
  font-size: 35px;
  font-weight: normal;
  margin-top: 5px;
} 

Answer 1

是的你可以，

尝试使用CSS到本机

将CSS文本转换为React Native样式表对象。

font-size: 18px;
line-height: 24px;
color: red;

至

{
  fontSize: 18,
  lineHeight: 24,
  color: 'red',
}

将所有类似数字的值转换为数字，并将类似字符串的转换为字符串。

import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }

另一个选择是react-native-css-transformer

Answer 2

使用styled-components 。

然后，您可以使用css编写组件样式的代码。

const Body = styled.body`
   margin: 25px;
   background-color: rgb(240,240,240);
   font-family: arial, sans-serif;
   font-size: 14px;
`;

const Header = styled.h1`
  font-size: 35px;
  font-weight: normal;
  margin-top: 5px;
`;