1.6 熟悉项目

以初始化的 RN30Code 项目为例，我们来简单熟悉下项目。

1.6.1 认识项目结构

我们主要关心和开发密切的项目结构。

RN30Code
    |-- android
    |-- ios
    |-- node_modules
    |-- index.android.js
    |-- index.ios.js
    |-- package.json

• android 和 ios 对应的就是原生代码，分别可以通过 Android Studio 和 Xcode打开，如果不涉及到混合开发，一般用不到。
• node_modules 里面内容非常多，这是我们项目依赖文件。
• package.json 是项目说明文件。里面可以看到

  ...
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2"
  },
  ...
  

  这段代码说明了当前项目的依赖。

• index.ios.js 和 index.android.js 分别是 iOS/Android 程序入口文件，当我们调用 "react native run ios/android" 命令时，就会执行该文件。在实际React Native项目中经常会看到 xxx.ios.js 或者 xxx.android.js，这表明该文件不是两个平台通用的文件，只针对其中一个平台。

1.6.2 熟悉代码

我们以 index.android.js 文件为例（index.ios.js 代码基本上一致），来熟悉下代码。

import React, { Component } from 'react';//从React中导入依赖
import {  //从React Native依赖中导入
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class RN30Code extends Component {
  render() {//绘制界面的方法
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          欢迎阅读这本书! {/*修改了此处代码*/}
        </Text>
        <Text style={styles.instructions}>{/*修改了此处代码*/}
          这本书由浅入深,循序渐进的介绍React Native相关知识.
        </Text>
        <Text style={styles.instructions}>
          让我们开始吧! {/*修改了此处代码*/}
        </Text>
      </View>
    );
  }
}
// 样式文件,类似css
const styles = StyleSheet.create({
  container: {
    flex: 1, 
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
// 注册程序. 代表RN30Code组件是当前程序的入口
AppRegistry.registerComponent('RN30Code', () => RN30Code);

上面修改了默认的代码，我们需要在程序的入口文件中注册当前项目， 所以调用了

AppRegistry.registerComponent('RN30Code', () => RN30Code);

程序运行的结果如图1-14。 图1-14 运行结果