React Native – 编码规范与结构

编码标准

当涉及到React Native的编码标准时，遵循最佳实践以确保代码的可读性、可维护性和项目内的一致性是非常重要的。虽然React Native没有官方的编码标准，但你可以采用广泛接受的约定和指南。以下是一些建议：

基本规则

始终使用 const 或 let 来声明变量。默认情况下使用 const ，除非需要重新赋值给变量。
始终使用函数式组件。
不要在渲染方法中嵌套组件或使用 getComponent。如果可能的话，总是尝试分离组件！

命名

PascalCase：这是React Native组件最常用的命名规则。它涉及到将名称中每个单词的首字母大写。
驼峰命名法：这种命名规则不如Pascal命名法常见，但有时仍会使用。它涉及将名称中的第一个单词的首字母大写，然后将每个后续单词的首字母大写。
CONSTANT_CASE：这种命名规则用于定义全局常量和枚举。

示例：

// CONSTANT_CASE
const PRIMARY_COLOR = '#FF0000';
const FONT_SIZE_LARGE = 18;
const API_ENDPOINT = 'https://api.example.com';

// PascalCase & camelCase
interface PascalCase {
  camelCase: string;
}

类型系统

应尽可能总是定义类型。 any 类型在任何情况下都是受限的。

接口（TypeScript）

接口是定义对象形状或结构的一种方式。

示例：

interface Person {
  name: string;
  age: number;
}

在TypeScript中使用接口的好处：

类型安全性：接口有助于确保TypeScript代码的类型安全性。这意味着你可以确信对象是正确的类型，且方法被正确的参数调用。
可重用性：接口可以用来使代码更具可重用性。通过在接口中定义对象的结构，你可以在多个类中重用该结构。
清晰度：接口可以帮助提高你的代码的清晰度。通过在接口中定义对象的结构，你可以使理解对象的使用方式变得更容易。

源代码组织

Imports

尽可能使用绝对路径。
在引用同一位置的文件时，使用相对路径

Exports

倾向于使用文件作用域进行命名空间划分，以及使用命名导出。
导入默认模块时使用相同的名称。

Styles

尽可能使用基础样式。

const baseStyle = StyleSheet.create({
  flex: {
    flex: 1,
  },
  justifyContentCenter: {
    justifyContent: 'center',
  },
  centralize: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  p4: {
    padding: 4,
  },
  m8: {
    margin: 8,
  },
});

在创建新组件时，总是创建单独的样式文件。

const styles = StyleSheet.create({
  width: {
    width: 16
  },
  height: {
    height: 16,
  },
  successMessage: {
    fontFamily: 'Inter-Medium',
    color: 'green'
  },
  errorMessage: {
    fontFamily: 'Inter-Regular',
    color: 'red'
  },
  textAlignCenter: {
    textAlign: 'center',
  },
});

export default styles;

不要使用内联样式。始终使用 StyleSheet 来创建样式对象。

// No inline style
<Text style={{ fontSize: 16, color: 'red' }}>Hello, React Native!</Text>

一致性

考虑在声明函数时使用箭头函数，而不是传统的函数形式。
你可以将箭头函数用于各种目的，包括事件处理器，函数组件等等。

示例：

// Event Handlers
<Button onPress={() => console.log('Button clicked!')} title="Click me" />

// functional components
const MyComponent = () => {
  return <Text>Hello, React Native!</Text>;
};

Hooks API

useCallback
useMemo
当需要记忆化以前的函数/值时应该使用。
仅在声明的函数/值有依赖变化时使用。

示例：

// Bad
const FooComponent = () => {
  const onPress = () => {
    // onPress is newly created in every render instead of reusing the previous one
  };

  return <Bar onPress={onPress} />
}

// Good
const FooComponent = ({a, b}) => {
  const onPress = useCallback(() => {
    // onPress is reused if a & b don't change.
  },[a, b]);

  return <Bar onPress={onPress} />
}

Selectors

尝试使用选择器从 redux 状态中选取值。

示例：

function TodoList() {
  // This anonymous arrow function is a selector!
  const todos = useSelector(state => state.todos)
}

文件夹结构

src : 这个文件夹是你的应用程序中所有代码的主要容器。
components : 用于存储你在应用中使用的任何通用组件的文件夹（例如通用按钮）
screens：包含所有应用程序屏幕/功能的文件夹。
navigations : 存储导航器的文件夹。
services ：用于存储应用程序中使用的所有常用服务的文件夹。
types ：用于存储应用程序中使用的所有枚举和接口的文件夹。
redux : 用于存储动作，减速器和redux存储的文件夹。
App.js ：启动你整个应用的主要组件。
index.js ：根据React-Native标准，这是你的应用程序的入口点。
assets : 用于存储所有图片、矢量图、字体等的资源文件夹。

修改根文件夹（ .env ）中的环境变量文件

示例：

- src
  - components
    - Button.js
    - Text.js
  - screens
    - HomeScreen.js
    - ProfileScreen.js
  - navigations
    - AppNavigator.js
    - TabNavigator.js
  - services
    - api.js
    - http.js
  - utils
    - helpers.js
    - constants.js
  - types
    - enums
      - userStatus.js
    - interfaces
      - userData.ts
  - redux
    - action.js
    - store.js
    - reducer.js
  - App.js
  - index.js
- assets
  - images
    - png
      - logo.png
    - svg
      - logo.svg
  - fonts
    - Roboto-Regular.ttf