文章/答案/技术大牛

发布

社区首页 >问答首页 >如何安装顺风？

问如何安装顺风？
EN

Stack Overflow用户

提问于 2022-03-09 19:28:50

回答 2查看 514关注 0票数 1

我一直在尝试在我的反应本土项目中使用顺风，但由于某种原因，它是行不通的。

我做了"npm安装顺风-rn“和"npx安装-顺风-rn”，但在我的应用程序中没有任何变化。

这是我的代码

import { StatusBar } from 'expo-status-bar';
import {SafeAreaView, View, Text} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';
import utilities from './tailwind.json';

const App = () => {
    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>
    );
};

const Root = () => (
    <TailwindProvider utilities={utilities}>
        <App />
    </TailwindProvider>
);

export default Root;

但是它所做的就是把“”这个句子放到屏幕的左上方。有人能帮我吗？

react-native

tailwind-css

回答 2

Stack Overflow用户

发布于 2022-04-27 02:38:36

我想你没有完成剩下的配置

票数 0

Stack Overflow用户

发布于 2022-08-01 06:11:12

STEP1:，你需要做的是首先按照每一条指令去做，你就能解决你的问题了。

STEP2:检查你的package.json它应该是这样的-

   {
  "name": "expo-tailwind-example",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
    "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
  },
  "dependencies": {
    "expo": "~44.0.2",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "0.17.1",
    "tailwind-rn": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "concurrently": "^7.0.0",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23"
  },
  "private": true
}

最初，您的实用程序将是空的，请不要惊慌，但当您使用类时，它将被填充样式。

CHILL

票数 0

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

原文链接：

https://stackoverflow.com/questions/71415019

复制

相似问题

问如何安装顺风？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何安装顺风？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何安装顺风？
EN