React Native 完美运行示例教程

React Native 完美运行示例教程

项目目录结构及介绍

ReactNative--PerfectRunDemo/
├── App.js
├── __tests__/
├── android/
├── app.json
├── babel.config.js
├── index.js
├── ios/
├── metro.config.js
├── package.json
└── src/
    ├── components/
    ├── screens/
    └── utils/

• App.js: 项目的根组件。
• tests: 存放测试文件。
• android: 包含Android项目的所有文件。
• app.json: 包含应用的名称、标识和其他配置。
• babel.config.js: Babel配置文件。
• index.js: 项目的入口文件。
• ios: 包含iOS项目的所有文件。
• metro.config.js: Metro Bundler配置文件。
• package.json: 项目的依赖和脚本配置。
• src: 项目的源代码目录。
  • components: 存放可复用的React组件。
  • screens: 存放应用的各个页面。
  • utils: 存放工具函数和常量。

项目启动文件介绍

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• AppRegistry: React Native应用的入口点。
• App: 导入的根组件。
• app.json: 导入应用的名称。

App.js

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello, World!</Text>
    </SafeAreaView>
  );
};

export default App;

• SafeAreaView: 确保内容不会被设备刘海屏等遮挡。
• Text: 显示文本的组件。

项目配置文件介绍

app.json

{
  "name": "PerfectRunDemo",
  "displayName": "PerfectRunDemo"
}

• name: 应用的内部名称。
• displayName: 应用的显示名称。

package.json

{
  "name": "ReactNative--PerfectRunDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

• scripts: 定义了运行、测试和Lint的命令。
• dependencies: 项目的生产依赖。
• devDependencies: 项目的开发依赖。
• jest: Jest测试框架的配置。

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

• presets: 使用Metro Bundler的预设。

metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};