React Native 集成到已有项目

前言

       React Native已经出现很久了，有很多应用也在进行尝试，前面我们也讲述了怎么创建React Native工程以及怎么搭建原生语言与js的开发环境。

       但是在实际应用中，很多项目都不是从零开始的，而是在已有项目中进行尝试，这就需要将React Native集成到已有项目，这里我们就来讲讲怎么集成到已有项目。

需求

       这里我们会用Android Studio创建一个工程，改工程包含有一个主页面，里面里有一个跳转按钮，能够跳转到用React Native实现的页面。

创建Android工程

       这里由于React Native是从Android 4.1开始支持的，因此我们直接创建最小版本号为16的工程。

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 7.0.

       创建工程很容易就完成了，现在我们加一个跳转按钮不过当前还不能跳转。最终展示界面如下：

       Activity中处理代码如下：

public class MainActivity extends AppCompatActivity {
   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setViewListener();
    }

    private void setViewListener() {
        findViewById(R.id.to_react).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "go  to  React", Toast.LENGTH_LONG).show();
            }
        });
    }
}

       目前这里弹出Toast 提示，之后改为跳转到React Native界面。

集成

       这里我们安装官方指定的步骤来进行集成，官方集成的链接为：查看链接，在集成之前希望你已经配置好了React Native 环境，比如Node.js， watchman等。下面我们来分步骤集成。

初始化

       首先在命令行进入到你所创建的工程下，第一步输入如下命令：

npm init

       这一步主要在工程下创建package.json文件，输入命令后界面输出如下内容：

       这里需要输入name，这里name就是JS中AppRegistry.registerComponent(‘RNDemo’, () => xxxx)中的RNDemo，也就是项目名。不过这里目前只能输入小写。之后会输入version等信息，可以跳过某些内容直接回车。需要输入的内容展现如下：

Press ^C at any time to quit.
name: (RNDemo1) rndeme1
version: (1.0.0) 1.0.0
description: deme
entry point: (index.js) index.android.js
test command: test
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/doc/ReactNative/RNDemo1/package.json:

{
  "name": "rndeme1",
  "version": "1.0.0",
  "description": "deme",
  "main": "index.android.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) 

       这里输入yes就好了。最终这些内容都会生成在package.json中。我们打开package.json看看最终生成的内容：

{
  "name": "rndeme1",
  "version": "1.0.0",
  "description": "deme",
  "main": "index.android.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC"
}

       这里可以看到与我们上面输入的内容一致，只不过name这个单词拼写错了。。。

创建node module

       在上面的命令执行完成后，输入如下命令：

npm install –save react react-native // save 前面是两个横线

       等待一段时间，我们可以在项目的根目录发现生成了一个node module的文件夹，这一步也可以省略，直接从已有项目中拷贝过来。

创建.flowconfig

       flowconfig是给flow用的，flow的作用前面已经讲过了，主要用来做静态代码检查。我们可以输入如下命令在生成.flowconfig文件。

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

       运行完成后，你可以在文件夹下看到创建了一个.flowconfig，不过这个文件是影藏的，可以Mac下你可以ls -al来查看。

修改package.json

       上面的文件创建完成后，我们需要修改package.json 文件，在scripts节点下添加如下的语句：

“start”: “node node_modules/react-native/local-cli/cli.js start”

       最终修改后的package.json如下：

{
  "name": "rndeme1",
  "version": "1.0.0",
  "description": <