WOODONCHAN

React Native 项目结构介绍

目录结构

1
2
3
4
5
6
7
Project
|-- android
|-- ios
|-- node_modules
|-- index.android.js
|-- index.ios.js
|-- package.json

以上是通过 react-native init Project 命令创建的一个 React Native 项目目录结构图

  • android 文件夹中存放的是一个完整的android项目所需具备的基本代码文件
  • ios 文件夹中存放的是一个完整的ios项目所需具备的基本代码文件
  • node_modules 这文件夹中主要存放的是 node 模块,例如我们项目中会用到的一些第三方库,安装后就会出现在这个文件夹中
  • index.android.js 这个文件是 Android 版 React Native 项目的主模块文件,是项目运行后第一个被调用的文件
  • index.ios.js 这个文件是 iOS 版 React Native 项目的主模块文件,是项目运行后第一个被调用的文件
  • package.json 这个文件中主要是描述的是 NPM 包的所有相关信息,其中包含项目的一些基本信息例如项目名称,版本号等,还包含依赖包相关信息,构建等信息。

代码结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,} from 'react-native';
export default class Test extends Component {
render() {
return (
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('Test', () => Test);

分析下上面的代码

  • import 类似java开发中import 就是为了导入所需模块或组件到当前页面中
  • export default class Test extends Component 这段代码表示在当前页面中创建一个名为Test的组件
  • render() 中所写的代码为当前页面所需渲染的内容,运行后会渲染到当前容器中
  • const styles = StyleSheet.create 创建了当前页面所需要的样式类 styles,类似 CSS 样式表,页面中的样式建议统一编写在这里
  • AppRegistry.registerComponent(‘Test’, () => Test) 这段代码表示把名为 Test 的组件注册为当前整个应用的根容器,项目运行起来后会第一个调用这个组件。AppRegistry.registerComponent 这个方法只会在应用打开后调用一次