如何不使用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;
`;