ReactNative-douban 项目教程

ReactNative-douban 项目教程

ReactNative-douban项目地址:https://gitcode.com/gh_mirrors/re/ReactNative-douban

1. 项目的目录结构及介绍

├─ android/ # 放置打包后android平台的文件
├─ ios/ # 放置打包后ios平台的文件
├─ src/ # 源码目录（开发都在这里进行）
│ ├─ components/ # 组件
│ ├─ pages/ # 页面
│ ├─ assets/ # 静态资源
├── App.js # 根组件
├── app.json # 应用配置文件
├── index.js # 入口文件
├── .babelrc # Babel 转码配置
├── .gitignore # （配置）需被 Git 忽略的文件（夹）
├── package.json # 依赖

目录结构介绍

• android/ 和 ios/ 目录分别包含用于打包的 Android 和 iOS 平台的文件。
• src/ 目录是源码目录，开发工作主要在这里进行。
  • components/ 目录存放项目中使用的组件。
  • pages/ 目录存放项目的页面。
  • assets/ 目录存放静态资源，如图片、字体等。
• App.js 是项目的根组件。
• app.json 是应用的配置文件。
• index.js 是项目的入口文件。
• .babelrc 是 Babel 转码配置文件。
• .gitignore 配置了需要被 Git 忽略的文件和文件夹。
• package.json 列出了项目的依赖。

2. 项目的启动文件介绍

入口文件 index.js

index.js 是项目的入口文件，负责初始化 React Native 应用并加载根组件 App.js。以下是 index.js 的基本内容：

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

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

根组件 App.js

App.js 是项目的根组件，包含了应用的主要逻辑和结构。以下是 App.js 的基本结构：

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text>欢迎使用 ReactNative-douban 应用！</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

3. 项目的配置文件介绍

app.json

app.json 文件包含了应用的基本配置信息，如应用的名称、图标等。以下是 app.json 的基本内容：

{
  "name": "ReactNativeDouban",
  "displayName": "ReactNativeDouban"
}

package.json

package.json 文件列出了项目的依赖和一些脚本命令。以下是 package.json 的基本内容：

{
  "name": "react-native-douban",
  "version": "1.0.0",
  "description": "一个基于 React Native 仿豆瓣电影构建的app 项目",
  "main": "index.js",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-navigation": "^4.4.3",
    "react-native-elements": "^3.4.2"
  },
  "devDependencies": {
    "eslint": "^7.20.0",
    "babel-eslint": "^10.1.0"
  },
  "author": "ForeManWang",
  "license": "MIT"
}

ReactNative-douban项目地址:https://gitcode.com/gh_mirrors/re/ReactNative-douban