react native入门

• 首先说明本人原为android开发工程师，本文章基于windows讲解如何在android原生应用中嵌入react native页面以及如何做react native的热更新

既然是开发react native，我们可以先去逛逛react native的官方网站，由于小编本人英文也不是很好，所以推荐官方中文网站：https://reactnative.cn/docs/0.39/getting-started.html#content

官方中文网可以帮小白解决很多问题：比如搭建开发环境，再比如如何将react native页面嵌入到原生应用

下面大家先看一个原生android项目结构（android studio）:

 

搭建基础环境基本上包含几点：android环境搭建，下载nodejs，下载上图中的node_modules（react库），flowconfig文件，以及package.json（react 的相关信息），这部分内容官方中文网基本上都可以帮小白解决，当然中途也遇到一些问题不一一列举，这里只给出一些常见问题的解决地址，碰到的童鞋自行查看：

http://blog.csdn.net/que_li/article/details/52402323

http://blog.csdn.net/b992379702b/article/details/52234479

基础的问题自行解决，下面直接看demo,由于只是测试demo所以做的比较粗糙：

 

 

 

本demo包含 APP 最常用的

底部导航TabNavigator　　https://github.com/exponent/react-native-tab-navigator

listview（包含上下拉刷新）　　https://reactnative.cn/docs/0.39/refreshcontrol.html#content

页面跳转　　Navigator

全屏loading （gif）　　gif需要单独使用fresco的另一个库，在gradle文件中添加：compile 'com.facebook.fresco:animated-gif:0.11.0'

 

内部具体实现参照demo,后续会给出

 

• 打包发布

　　

　　在上图给出的项目结构图中，对应的js页面以及js中是用的资源文件存放都是杂乱无章的，这里只是粗略的demo小编才这么放，没有进行规划，我们可以参考纯react的项目结构进行摆放

　　这里我们熟悉一条命令：react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

　　这条命令的功能主要是两个：

　　1.生成index.android.bundle。bundle文件是不是很熟悉？对的，react 框架最终需要的就是bundle文件。

.meta文件可以忽略，中间产物。

　　2.拷贝资源文件

　　原资源文件目录：

 

打包后的资源文件将会被移动到：

 

是不是很熟悉？这里打包过程中会将js中使用到的资源移动到原生目录下，具体哪个分辨率应该是根据图片自动判断的。

 

别鸡冻，我们先整理一下热更新的思路：其实很简单！ ReactApplication-->getReactNativeHost-->getJSBundleFile

　　

 

 

• 说白了就是修改获取bundle文件的路径，在上面我们已经生成了bundle文件
• 注意bundle文件中并不包含资源文件，所以我们必须将资源文件一同带上，demo中js用到的资源文件是生成在mdpi下的所以我们将 index.android.bundle文件以及drawable-mdpi文件夹单独提取出来，压缩
• 

  接下来我们把pack.zip压缩文件放在服务端，在需要更新的时候进行下载（demo中只是为了方便，没有就下载）。其实更新也可以放在js中做，react也提供了方案。 但作为android原生开发工程师的小编，还是习惯用原生的写的顺手

• 在这里推荐一个文件下载框架 filedownloader（compile 'com.liulishuo.filedownloader:library:1.4.1'）
  demo中小主下载更新包用的就是这个

　　在下载完成之后记得要解压缩哦：

 

这里小主用到ZIP解压：

public class ZIP {
    public ZIP() {

    }

    /**
     * DeCompress the ZIP to the path
     *
     * @param zipFileString name of ZIP
     * @param outPathString path to be unZIP
     * @throws Exception
     */
    public static void UnZipFolder(String zipFileString, String outPathString) throws Exception {
        ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString));
        ZipEntry zipEntry;
        String szName = "";
        while ((zipEntry = inZip.getNextEntry()) != null) {
            szName = zipEntry.getName();
            if (zipEntry.isDirectory()) {
                // get the folder name of the widget
                szName = szName.substring(0, szName.length() - 1);
                File folder = new File(outPathString + File.separator + szName);
                folder.mkdirs();
            } else {

                File file = new File(outPathString + File.separator + szName);
                file.createNewFile();
                // get the output stream of the file
                FileOutputStream out = new FileOutputStream(file);
                int len;
                byte[] buffer = new byte[1024];
                // read (len) bytes into buffer
                while ((len = inZip.read(buffer)) != -1) {
                    // write (len) byte from buffer at the position 0
                    out.write(buffer, 0, len);
                    out.flush();
                }
                out.close();
            }
        }
        inZip.close();
    }

    /**
     * Compress file and folder
     *
     * @param srcFileString file or folder to be Compress
     * @param zipFileString the path name of result ZIP
     * @throws Exception
     */
    public static void ZipFolder(String srcFileString, String zipFileString) throws Exception {
        //create ZIP
        ZipOutputStream outZip = new ZipOutputStream(new FileOutputStream(zipFileString));
        //create the file
        File file = new File(srcFileString);
        //compress
        ZipFiles(file.getParent() + File.separator, file.getName(), outZip);
        //finish and close
        outZip.finish();
        outZip.close();
    }

    /**
     * compress files
     *
     * @param folderString
     * @param fileString
     * @param zipOutputSteam
     * @throws Exception
     */
    private static void ZipFiles(String folderString, String fileString, ZipOutputStream zipOutputSteam) throws Exception {
        if (zipOutputSteam == null)
            return;
        File file = new File(folderString + fileString);
        if (file.isFile()) {
            ZipEntry zipEntry = new ZipEntry(fileString);
            FileInputStream inputStream = new FileInputStream(file);
            zipOutputSteam.putNextEntry(zipEntry);
            int len;
            byte[] buffer = new byte[4096];
            while ((len = inputStream.read(buffer)) != -1) {
                zipOutputSteam.write(buffer, 0, len);
            }
            zipOutputSteam.closeEntry();
        } else {
            //folder
            String fileList[] = file.list();
            //no child file and compress
            if (fileList.length <= 0) {
                ZipEntry zipEntry = new ZipEntry(fileString + File.separator);
                zipOutputSteam.putNextEntry(zipEntry);
                zipOutputSteam.closeEntry();
            }
            //child files and recursion
            for (int i = 0; i < fileList.length; i++) {
                ZipFiles(folderString, fileString + java.io.File.separator + fileList[i], zipOutputSteam);
            }//end of for
        }
    }

    /**
     * return the InputStream of file in the ZIP
     *
     * @param zipFileString name of ZIP
     * @param fileString    name of file in the ZIP
     * @return InputStream
     * @throws Exception
     */
    public static InputStream UpZip(String zipFileString, String fileString) throws Exception {
        ZipFile zipFile = new ZipFile(zipFileString);
        ZipEntry zipEntry = zipFile.getEntry(fileString);
        return zipFile.getInputStream(zipEntry);
    }

    /**
     * return files list(file and folder) in the ZIP
     *
     * @param zipFileString  ZIP name
     * @param bContainFolder contain folder or not
     * @param bContainFile   contain file or not
     * @return
     * @throws Exception
     */
    public static List<File> GetFileList(String zipFileString, boolean bContainFolder, boolean bContainFile) throws Exception {
        List<File> fileList = new ArrayList<File>();
        ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString));
        ZipEntry zipEntry;
        String szName = "";
        while ((zipEntry = inZip.getNextEntry()) != null) {
            szName = zipEntry.getName();
            if (zipEntry.isDirectory()) {
                // get the folder name of the widget
                szName = szName.substring(0, szName.length() - 1);
                File folder = new File(szName);
                if (bContainFolder) {
                    fileList.add(folder);
                }

            } else {
                File file = new File(szName);
                if (bContainFile) {
                    fileList.add(file);
                }
            }
        }
        inZip.close();
        return fileList;
    }
}

 

好了，就到这里吧！！！之后会有更多相关的实践，喜欢的可以订阅一下~~

最后附上源码：

https://share.weiyun.com/a9566f398782ae8cd473e14b3b5fb97c

本文章只是简单的demo，很多东西没有处理：更新的时机，热更得加密等等，就留给大家自己自由发挥吧。