我应该在哪里放置 Expo/React Native 项目的 CSS 重置文件？

Question

我有一个使用 Expo 搭建的 React Native 项目，想要执行 CSS 重置。我应该把这样的文件放在哪里？我需要将它连接到任何东西吗？

我当前的项目结构如下所示：

Answer 1

React Native 为某些组件提供了默认样式，但这通常比 Web 浏览器为 HTML 元素提供的默认样式的侵入性要小。因此，传统意义上的 CSS 重置的必要性并不那么重要。

但是，如果您希望在整个应用程序中设置一致的基本样式，则可以创建一个全局样式文件来定义要应用的常见样式。方法如下：

首先。 创建全局样式文件：

• 为您的全局样式创建一个新文件，例如

  globalStyles.js

  。
• 定义要在多个组件中使用的通用样式。

示例 (

globalStyles.js

):

import { StyleSheet } from 'react-native';

export const globalStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  // ... more global styles
});

其次。 在组件中导入和使用全局样式：

• 在组件文件中导入全局样式，并将它们与组件特定的样式一起使用。

示例（在组件中使用全局样式）：

import React from 'react';
import { View, Text } from 'react-native';
import { globalStyles } from './path-to/globalStyles';

const MyComponent = () => {
  return (
    <View style={globalStyles.container}>
      <Text>Welcome to My App</Text>
      {/* ... more component UI */}
    </View>
  );
}

export default MyComponent;

第三。 没有直接等同于 CSS 重置的功能：

• 请记住，在 React Native 中，没有与 Web 开发中的 CSS 重置文件直接等效的文件。样式方法不同，侧重于单个组件样式而不是全局浏览器样式。

第四。 展会详情：

• 由于您使用的是 Expo，因此流程保持不变。 Expo 项目遵循与任何其他 React Native 项目相同的样式结构。