Styled-jsx React Native

Question

我正在尝试在 React 本机项目中实现 styled-jsx。我正在关注本教程：https://github.com/zeit/styled-jsx

我已添加此代码：

.babelrc：

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread"
    ]
}

屏幕：

import React, { Component } from 'react';
import { View } from 'react-native';
import _JSXStyle from 'styled-jsx/style'
export default class HomeScreen extends React.Component {

    render() {
        return (
            <div className="jsx-123">
                <p className="jsx-123">only this paragraph will get the style :)</p>
                <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
            </div>
        )
    };
}

但我收到以下错误：

============ 更新============

我从 'styled-jsx/style' 中删除了一个导入 _JSXStyle。

styled-jsx/babel：

module.exports = require('./dist/babel'),
    {
        "plugins": [
            ["styled-jsx/babel", { "optimizeForSpeed": false }]
        ]
    }

现在我收到此错误：

如果您尝试过，请提供建议。可能是我遗漏了任何文件，请告诉我。

谢谢！

Answer 1

你的错误
您尝试了 如何工作 部分的示例。库开发人员指出编译后的外观，所以，请按照文档。为了您更好地理解，我在这里给出。

首先，安装包：

npm install --save styled-jsx

接下来，在你的 babel 配置中添加 styled-jsx/babel 到 plugins：

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

现在将 <style jsx> 添加到您的代码中并用 CSS 填充它：

export default () => (
  <div>
    <p>only this paragraph will get the style :)</p>

    { /* you can include <Component />s here that include
         other <p>s that don't get unexpected styles! */ }

    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

注意：根据文档，它应该可以工作。 https://github.com/zeit/styled-jsx#getting-started