使用 CSS 样式表和类名的 React-Native 样式

Question

我刚刚开始开发一个 react-native 应用程序。 官方文档建议 使用 JavaScript 对象为您的组件创建样式，如下所示，

 <Text style={style.text}>Blah Blah</Text>
const style = {
    text: {
        fontSize: 20
    }
}

我正在尝试将 className 添加到 Text 属性，因此我可以使用简单的样式表添加 css。这甚至可以使用 react-native 吗（我知道我们可以在 react 中做到这一点）？像这样的东西，

 <Text className="text-style"></Text>

// from CSS file
text-style: {
    font-size: 20;
}

原文由 rodiwa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

需要配置 react native sass /css 转换器 https://github.com/kristerkari/react-native-sass-transformer

将 JSX className 属性转换为在 React Native 中运行时计算样式的样式属性。该插件用于将包含解析的 CSS 媒体查询和 CSS 视口单元的样式对象与 React Native 匹配。

请查看此链接： https ://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

使用 React 本机打字稿时，您还需要安装此包 https://github.com/kristerkari/react-native-types-for-css-modules

原文由 Najathi 发布，翻译遵循 CC BY-SA 4.0 许可协议