React Native 目录结构

使用tree 查看目录结构 tree -a -L 1，结构如下：

.
├── .bundle
├── .eslintrc.js       # eslint的配置文件
├── .gitignore         # git 忽略文件
├── .idea              # idea 配置文件
├── .node-version      # node 版本
├── .prettierrc.js     # 代码格式化规则
├── .watchmanconfig    # Watchman的配置文件，用于监控bug文件和文件变化，并且可以出发指定的操作
├── App.tsx            # app根组件
├── Gemfile            # gem 依赖配置文件
├── Gemfile.lock       # gem 依赖的版本锁定
├── __tests__          # 测试文件
├── android            # Android文件所在目录，包含AndroidStudio项目环境文件
├── app.json           # 工程配置的常量
├── babel.config.js    # Babel的配置文件
├── index.js           # 工程入口文件
├── ios                # iOS文件所在目录，包含XCode项目环境
├── metro.config.js    # 这个是facebook的工程构建文件，这个不需要做任何的修改
├── node_modules       # 主要存放根据package.json文件声明的依赖
├── package.json       # 项目基本信息（比如名称、版本、许可证等元数据）以及依赖信息（npm install安装的模块）等
├── package-lock.json  # package.json 版本锁定文件
├── tsconfig.json      # typescript编译配置文件
├── vendor             # 存放gem 安装的包
└── yarn.lock          # 依赖版本锁定文件

8 directories, 16 files

重要文件

app.json 项目的配置文件，存放了一些公共的配置项
```
  {
    "name": "AwesomeProject",
    "displayName": "AwesomeProject"
  }
```
- name 用于配置项目的名称
- displayName 用于配制生成iOS和Android项目时的显示名称，也就是桌面上图标下面的名称

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

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

App.tsx 实际的 React Native 代码，项目的根视图

  /**
   * 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}>
        <Text
          style={[
            styles.sectionTitle,
            {
              color: isDarkMode ? Colors.white : Colors.black,
            },
          ]}>
          {title}
        </Text>
        <Text
          style={[
            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}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={backgroundStyle}>
          <Header />
          <View
            style=>
            <Section title="Step One">
              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
              screen 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;

目录结构

重要文件

CATALOG

FEATURED TAGS

FRIENDS