文章/答案/技术大牛

发布

社区首页 >问答首页 >顺风-rn顺风函数返回空对象。

问顺风-rn顺风函数返回空对象。
EN

Stack Overflow用户

提问于 2022-08-31 20:18:40

回答 1查看 36关注 0票数 0

我试图在我的项目中设置顺风，但这似乎是不可能的。文档说您应该使用yarn add tailwind-rn来安装，然后使用npx setup-tailwind-rn来设置它。这是github页面上的代码示例：

import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';

const Hello = () => {
    const tailwind = useTailwind();

    return (
        <SafeAreaView style={tailwind('h-full')}>
            <View style={tailwind('pt-12 items-center')}>
                <View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
                    <Text style={tailwind('text-blue-800 font-semibold')}>
                        Hello Tailwind
                    </Text>
                </View>
            </View>
        </SafeAreaView>
    );
};

export default Hello;

我的代码如下所示：

import { StyleSheet, Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';

export default function App() {

  const tailwind = useTailwind();

  return (
    <View style={tailwind('text-white')}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

代码不会抛出任何错误，但不会产生任何结果。我还检查了tailwind('text-white')的值，它似乎只是一个空对象。为什么不起作用？

react-native

tailwind-css

reactjs

回答 1

Stack Overflow用户

发布于 2022-09-01 06:32:14

将此添加到依赖项(package.json)中

                "tailwind-react-native-classnames": "^1.5.1",

将导入到您的项目页面中，

               import tw from "tailwind-react-native-classnames";

最后，使用这样的顺风样式，

                              style={tw`flex-1`}       
              <View style={[tw`bg-gray-200`, { height: 0.6 }]} />

最后你的代码会起作用的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73561465

复制

相似问题

问顺风-rn顺风函数返回空对象。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风-rn顺风函数返回空对象。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风-rn顺风函数返回空对象。
EN