React Native TailwindCSS 使用教程

1. 项目的目录结构及介绍

react-native-tailwindcss/
├── src/
│   ├── components/
│   │   ├── Button.js
│   │   ├── Card.js
│   │   └── ...
│   ├── styles/
│   │   ├── tailwind.js
│   │   └── ...
│   ├── App.js
│   └── ...
├── package.json
├── README.md
└── ...

• src/：项目的源代码目录。
  • components/：存放项目中使用的组件。
  • styles/：存放样式文件，如 tailwind.js。
  • App.js：项目的入口文件。
• package.json：项目的依赖和脚本配置文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/App.js。这个文件是 React Native 应用的入口点，负责初始化应用并渲染根组件。

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

const App = () => {
  return (
    <SafeAreaView style={tailwind('flex-1 items-center justify-center bg-white')}>
      <View style={tailwind('p-5 bg-blue-500 rounded-lg')}>
        <Text style={tailwind('text-white text-lg font-bold')}>
          Hello, TailwindCSS!
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 tailwind.js。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-native-tailwindcss",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2",
    "tailwind-rn": "^4.0.0"
  },
  "devDependencies": {
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-react": "^7.24.0"
  }
}

tailwind.js

tailwind.js 文件是 TailwindCSS 的配置文件，定义了样式规则和变量。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#123456',
        secondary: '#abcdef',
      },
    },
  },
  variants: {},
  plugins: [],
};

通过这些配置文件，可以自定义项目的样式和行为。