React Native目录结构

React Native目录结构

一个例子🌰：

├── __tests__                # 测试
├── src                      # 源码目录
│   ├── App.tsx              # app根组件
│   ├── actions              # actions
│   ├── assets               # 静态资源
│   ├── components           # 组件
│   ├── config               # 配置文件
│   ├── helper               # 应用服务类
│   ├── hooks                # 钩子
│   ├── i18n                 # 多语言支持
│   ├── navigation           # 路由导航
│   ├── reducers             # reducers
│   ├── store                # store
│   ├── theme                # 主题
│   ├── types                # 类型定义
│   ├── utils                # 工具类
│   └── api                  # API库
├── android                  # Android文件所在目录，包含AndroidStudio项目环境文件；
├── ios                      # iOS文件所在目录，包含XCode项目环境；
├── .editorconfig            # 编辑器配置
├── .eslintrc.js             # eslint的配置文件
├── .gitignore               # 配置git提交需要忽略的文件
├── .husky                   # git钩子配置
├── .prettierrc.js           # 代码格式化规则
├── .watchmanconfig          # Watchman的配置文件，用于监控bug文件和文件变化，并且可以出发指定的操作
├── index.js                 # 程序入口文件
├── app.json                 # 项目的配置文件
├── App.js                 	 # 入口组件
├── babel.config.js          # Babel的配置文件
├── global.d.ts              # ts全局声明文件
├── metro.config.js			 # 这个是Facebook的工程构建文件，这个不需要做任何的修改。
├── package.json             # 项目基本信息（比如名称、版本、许可证等元数据）以及依赖信息（npm install安装的模块）等
├── tsconfig.json            # typescript编译配置文件
└── yarn.lock                # 依赖版本锁定文件

需要重点关注的主要有一下三个⬇

app.json

app.json是项目的配置文件，存放了一些公共的配置项

新创建的项目，app.json的内容如下：

{"name": "AwesomeProject","displayName": "AwesomeProject"
}

index.js

index.js是项目的入口文件，一切初始化的加载和初始化配置都放在这里

新创建的项目，index.js内容如下：

/*** @format*/import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App);

代码很简单，就是加载 App.js 中的 App 组件，然后使用 AppRegistry.registerComponent() 函数注册组件和初始化。

一般情况下，如果需要全局加载和全局配置，可以把代码写这里。

App.js

App.js 或 App.tsx 是项目的实际 React Native 源码，主要是存放入口组件 App

新创建的项目，App.tsx 内人如下：

/*** Sample React Native App* https://github.com/facebook/react-native** @format*/import React from 'react';
import type {PropsWithChildren} from 'react';
import {SafeAreaView,ScrollView,StatusBar,StyleSheet,Text,useColorScheme,View,
} from 'react-native';import {Colors,DebugInstructions,Header,LearnMoreLinks,ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';type SectionProps = PropsWithChildren<{title: string;
}>;function Section({children, title}: SectionProps): JSX.Element {const isDarkMode = useColorScheme() === 'dark';return (<View style={styles.sectionContainer}><Textstyle={[styles.sectionTitle,{color: isDarkMode ? Colors.white : Colors.black,},]}>{title}</Text><Textstyle={[styles.sectionDescription,{color: isDarkMode ? Colors.light : Colors.dark,},]}>{children}</Text></View>);
}function App(): JSX.Element {const isDarkMode = useColorScheme() === 'dark';const backgroundStyle = {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,};return (<SafeAreaView style={backgroundStyle}><StatusBarbarStyle={isDarkMode ? 'light-content' : 'dark-content'}backgroundColor={backgroundStyle.backgroundColor}/><ScrollViewcontentInsetAdjustmentBehavior="automatic"style={backgroundStyle}><Header /><Viewstyle={{backgroundColor: isDarkMode ? Colors.black : Colors.white,}}><Section title="Step One">Edit <Text style={styles.highlight}>App.tsx</Text> to change thisscreen and then come back to see your edits.</Section><Section title="See Your Changes"><ReloadInstructions /></Section><Section title="Debug"><DebugInstructions /></Section><Section title="Learn More">Read the docs to discover what to do next:</Section><LearnMoreLinks /></View></ScrollView></SafeAreaView>);
}const styles = StyleSheet.create({sectionContainer: {marginTop: 32,paddingHorizontal: 24,},sectionTitle: {fontSize: 24,fontWeight: '600',},sectionDescription: {marginTop: 8,fontSize: 18,fontWeight: '400',},highlight: {fontWeight: '700',},
});export default App;