如何使用带有 React Native 的 Tailwind 导入 - 可以将 tailwind 缩短为 tw？答案

【问题标题】：How to use Tailwind imports with React Native- can tailwind be shortened to tw?如何使用带有 React Native 的 Tailwind 导入 - 可以将 tailwind 缩短为 tw？
【发布时间】：2022-10-08 23:48:54
【问题描述】：

我正在关注这个 YouTube 教程 https://www.youtube.com/watch?v=qJaFIGjyRms 并在 20 分钟时将 Tailwind 导入为 tw 然后继续在 app.js 中使用它我做了完全相同的事情但我得到了错误

“TypeError：（0，_tailwindRn.tw）不是函数。（在'（0，_tailwindRn.tw）（“justify-center items-center”）'中，'（0，_tailwindRn.tw）'未定义）”

screenshot

我的代码：

        import { StatusBar } from 'expo-status-bar';
        import { StyleSheet, Text, View } from 'react-native';
        import {tw} from 'tailwind-rn';

        export default function App() {
          return (
            <View style={tw("justify-center items-center")}>
              <Text>Open up App.js to start working on your             app!</Text>
              <StatusBar style="auto" />
            </View>
          );
        }

        const styles = StyleSheet.create({
          container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center',
          },
        });

【问题讨论】：

标签： reactjs react-native tailwind-css

【解决方案1】：

你需要安装tailwind-rn npm 包。

【讨论】：

我刚刚使用 npm install tailwind-rn 做到了这一点，但我仍然遇到同样的错误

【解决方案2】：

如果你回去看看教程，他们正在使用

import tw from 'tailwind-rn';

不是

import {tw} from 'tailwind-rn';

您可以在 import 语句中随意命名库的默认导出。

import TailWind from 'tailwind-rn'; import t from 'tailwind-rn'; 等等

【讨论】：

我已更改它，使其与教程相同，现在我收到类似的错误：“TypeError：（0，_tailwindRn.default）不是函数。（在'（0，_tailwindRn.default）（“flex- 1 justify-center items-center")', '(0, _tailwindRn.default)' 未定义)"
自安装库后，您是否重新启动了 Metro 并重建了项目？
是的，我已经重新启动了 Metro 并在 vs 代码中重新启动了项目，但仍然遇到相同的错误。
我重建了项目并且遇到了同样的错误，我使用了“npm install tailwind-rn”，而在教程中他使用了“yarn add tailwind-rn”，我没有这样做的唯一原因是因为我没有我的项目上的纱线锁
嘿，我遇到了同样的错误，你设法让它工作吗？

【解决方案3】：

请问有人找到解决方案了吗？

【讨论】：

vohratom，这篇文章看起来不像是试图回答这个问题。这里的每一篇文章都应该是一个明确的尝试回答这个问题;如果您有批评或需要澄清问题或其他答案，您可以在其下方直接post a comment（如这个）。请删除此答案并创建评论或新问题。请参阅：Ask questions, get answers, no distractions。