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