1.7 实际项目中入口文件处理

熟悉完了项目，我们了解了index.android.js是Android程序的入口文件，index.ios.js是iOS程序的入口文件，发现这两个文件的代码基本上是一样的。React Native 的优势是跨平台，避免一样逻辑的代码写两遍。所以实际项目中，一般两个入口文件都指向同一个文件。

接下来我们就把两个入口文件指向到一个文件。 创建一个新的文件夹 js，所有使用跨平台逻辑的代码放到这个文件夹下，如图1-15所示。

图1-15 创建js文件夹

然后在该文件夹下创建index.js，该文件作为程序新的入口文件，可以把之前index.android.js 或 index.ios.js里的代码复制进去。 然后修改index.android.js和index.ios.js中的代码:

//引入 ./js/index.js 文件
require('./js/index');

只保留这一行代码就OK，这样就两个入口文件就指向同一个文件了。 有经验的读者可能会质疑，为什么不直接删除 index.android.js和index.ios.js，直接在项目的根目录下创建一个index.js文件呢? 这样就不区分特定的平台了，全都通用了。 这种方式确实没有问题，但是有时候需要对不同平台进行一些初始化配置，保留两个入口文件就比较方便了。

1.7.1本书代码说明

本书有30天的内容，如果每天都要重新创建一个新项目演示，也不方便读者系统的学习。 本书把每天的代码单独放到一个文件夹下，演示的时候在 "./js/index.js"目录里进行配置。以今天的代码为例。 首先在js目录创建"page/day1/day1.js"，把今天的代码复制进去，如下：

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

export default class Day1 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,
    },
});

然后修改 js/index.js 文件

import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import Day1 from './page/day1/Day1';; //导入Day1
AppRegistry.registerComponent('RN30Code', () => Day1);

笔者只是修改了入口文件，运行程序，效果和1.6节中图1-14完全一样，当演示第二天的代码的时候，只需要按照葫芦画瓢，修改js/index.js代码即可:

import Day2 from './page/day2/Day2';
AppRegistry.registerComponent('RN30Code', () => Day2);

后面每天的内容都以这种形式给大家展示。这样方便大家参照练习，不仅可以演示新的代码，而且还保留了之前的代码。

1.7.2 本书配套代码下载和运行

本书完整的配套代码上传到了 Github 上，地址为: https://github.com/yll2wcf/RN30Code

下载到本地或者使用 git clone 到本地，如图1-16所示。 图1-6 下载代码

下载下来的代码，解压后不能直接运行，项目缺少 node_modules 目录，开源项目一般都不提交 node_modules目录。进入项目目录执行

yarn install

或者

npm install

下载项目的依赖，稍等片刻，下载成功后执行运行命令

react-native run-ios

或者

react-native run-android

就可以运行了。因为为了同时演示30天的内容，下载的项目中 "js/index.js"文件有点调整，如果大家暂时看不懂可以忽略，不影响大家查看代码，当大家学习完了后面的 React-Navigation 相关知识后就能看懂了。