Стили не применяютсяJavascript

Форум по Javascript
Ответить
Anonymous
 Стили не применяются

Сообщение Anonymous »

Название: стили Nativewind, не применяя в проекте React Native Expo, несмотря на ошибки в строительстве
body:
Я работаю над нативным проектом React, используя Expo и NativeWind (Tailwind CSS для REACT Native). Моя настройка компилируется без ошибок, но стили с ветром не применяются к моим компонентам. Я пробовал различные конфигурации, удаленные node_modules, переустановленные пакеты и протестировал разные версии, но ничего не работает. Изменение babel.config.js < /code> вызывает эту ошибку: < /p>

Ошибка. свойство < /p>
< /blockquote>
Текущая конфигурация (ниже) строит без ошибок, но стили не применяются. Может ли кто-нибудь определить проблему и помочь исправить ее, чтобы стили NativeWind работают правильно?

Код: Выделить всё

{
"name": "mobile-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.3.29",
"axios": "^1.6.8",
"babel-preset-expo": "^10.0.2",
"expo": "~50.0.14",
"expo-document-picker": "~11.10.1",
"expo-image-picker": "~14.7.1",
"expo-location": "~16.5.5",
"expo-secure-store": "~12.8.1",
"expo-status-bar": "~1.11.1",
"expo-task-manager": "~11.7.2",
"nativewind": "^4.1.23",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "~2.14.0",
"react-native-maps": "1.10.0",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"socket.io-client": "^4.7.5",
"expo-splash-screen": "~0.26.5",
"expo-font": "~11.10.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"tailwindcss": "^3.4.17"
},
"private": true
}
cailwind.config.js:

Код: Выделить всё

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
"./app/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
babel.config.js:

Код: Выделить всё

module.exports = function(api) {
api.cache(true);
return {
presets: [
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
'nativewind/babel',
],
plugins: [],
};
}
Что я пробовал:
  • Удаленный node_modules и пакет-lock.json , переосмысленный с установкой npm . TailWindcss и Babel-preset-expo .
  • Модифицированный Babel.config.js Чтобы добавить/удалить плагины, но получил [babel] .plugins не является достоверным свойством . Компоненты Используйте классы Tailwind (например, ).
  • Проверенный tailwind.config.js Content. - -clear .
Дополнительный контекст:

[*] Использование SDK 50.0.14, NativeWind 4.1.23, CSS 34.17. /> Проект строится/запускается без ошибок, но стили с ветром (например, Bg-blue-500 ) не применяются.

Тестирование на Android-эмулятор, выпуск сохраняется по платформам. /> Вопрос: < /strong> < /p>
Почему не применяются стили с ветром, несмотря на успешную сборку? Есть ли проблема с babel.config.js , tailwind.config.js или другой настройки? Как я могу исправить это, чтобы заставить Nativewind работать без ошибок?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-applying
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»