现有Android项目引入ReactNative--九步大法

版权声明:转载请标明出处 http://blog.csdn.net/github_33304260 https://blog.csdn.net/github_33304260/article/details/76571961

为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,而且官网的说明不是很详细,不是完全针对安卓的,所以本文的必要性不言而喻。

创建Android原生工程

新建Android原生工程,这里就不详细叙述了,如下图:
这里写图片描述

这里写图片描述

点击finish到这里Android原生工程创建完成。

运行一下看下效果:

这里写图片描述

动态添加ReactNative

第一步:初始化package.json文件:

在工程根目录下的CMD中输入npm init,然后会生成package.json文件
这里写图片描述

⚠️:这里name不能使用大写,如上动图所示,填写完相应的信息后会在根目录中生成相应的package.json文件,里面内容如下:

{
  "name": "reactnativeapp",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "libin",
  "license": "ISC"
}

第二步:在package.json文件中添加启动脚本:

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

这里写图片描述

第三步:添加react和react-native 模块:

在根目录执行如下代码:

npm install --save react react-native

效果如图:

这里写图片描述

执行完成后会出现下图的node_modules

这里写图片描述

查看项目中有node_modules,说明react和react native 安装完成,如果没有说明安装失败,需要重新安装

第四步:添加index.android.js文件到项目中:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorldApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello world! I am from ReactNattive!!</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('ReactNativeApp', () => HelloWorldApp);

这里写图片描述

⚠️:AppRegistry.registerComponent(‘ReactNativeApp’, () => ReactNativeApp);
里面的名称 必须和你的工程名一致,对这个文件不熟悉的童鞋可以看本人之前的代码或者官网:

react-native官网

下图是官网相关介绍:

这里写图片描述

第五步:添加ReactNative相关依赖:

1.在app的build.gradle文件中添加react-native依赖库

compile "com.facebook.react:react-native:+"

这里写图片描述

2.在project的build.gradle文件中添加react-native路径

maven {
      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
     url "$rootDir/../node_modules/react-native/android"
}

⚠️:这里注意不要使用maven中的,因为我们使用的是我们本地的node_modules

这里写图片描述

第六步:添加相关权限:

在AndroidManifest.xml中添加如下代码:

<uses-permission android:name="android.permission.INTERNET" />

第七步:添加reactnative组件:

添加com.facebook.react.ReactRootView 组件 布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_marginBottom="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="native----->Hello World!" />

    <com.facebook.react.ReactRootView
        android:id="@+id/react_root_view"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

</LinearLayout>

java代码如下:

public class MainActivity extends AppCompatActivity {
    ReactRootView react_root_view ;
    ReactInstanceManager mReactInstanceManager;

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

        react_root_view = (ReactRootView) findViewById(R.id.react_root_view);

        mReactInstanceManager =ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        //ReactNativeApp 是项目名,需要和index.adnroid.js中的保持一致
        react_root_view.startReactApplication(mReactInstanceManager, "ReactNativeApp", null);


    }
}

第八步:添加DevSettingsActivity配置

将DevSettingsActivity配置加入到AndroidManifest.xml文件中

这里写图片描述

第九步:实现ReactApplication

我们需要自定义Application然后去实现ReactApplication接口中的方法。

public class MyApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
    }
}

到此,我们已经大功告成,下面来看下效果。

效果展示

这里写图片描述

扫码关注公众号“伟大程序猿的诞生“,更多干货等着你~
扫码关注公众号“伟大程序猿的诞生“,更多干货等着你~
扫码关注公众号“伟大程序猿的诞生“,更多干货等着你~

公众号回复“资料获取”,获取更多干货哦~

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页