Android hybrid with cordova and ReactJS
In the last post Android hybrid with cordova we discussed how to hybrid an Android App with cordova.
Now we’ll make a further step: use web framework ReactJS on web part of the hybrid App.
Create ReactJS project
First you should have Node.js installed.
Then execute npx create-react-app web
under directory of your hybrid App project.
Configure Webpack
Webpack 4 may not work well. Issue: Cannot read property ‘thisCompilation’ of undefined. So we use webpack 3.11.0 instead of the newest version.
-
npm install --save-dev webpack@3.11.0 babel-core babel-jest babel-loader node-sass css-loader sass-loader style-loader
-
Create webpack.config.js under App/web
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'www');
const APP_DIR = path.resolve(__dirname, 'src');
const config = {
"entry": `${APP_DIR}/index.js`,
"output": {
"path": BUILD_DIR,
"filename": 'bundle.js'
},
"module": {
"rules": [
{
"test": /\.(js|jsx)$/,
"exclude": /node_modules/,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"env",
"react"
]
}
}
},
{
"test": /\.(css|scss)$/,
"use": [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'eval'
};
module.exports = config;
- Modify App/web/package.json scripts.build to
"react-scripts build && ./node_modules/.bin/webpack --config webpack.config.js"
.
Web code
-
Move App/web/src/logo.svg to App/web/src/images.
-
We will not pack images in webpack, so we can make some changes in App/web/src/App.js, remove
import logo from './logo.svg';
. Change<img src={logo} className="App-logo" alt="logo" />
to<img src='images/logo.svg' className="App-logo" alt="logo" />
-
We need an html page to use the ReactJS code. Just copy App/web/public/index.html to output directory App/web/www, rename it to react.html. Add a line
<script type="text/javascript" src="bundle.js"></script>
under<div id="root"></div>
. -
Create some tool scripts to build and copy generated files to SD card of device. Check android-tools.py of CordovaDroid.
Native code
- Now we shall create a new native Activity to embed react.html. Create ReactActivity. Don’t forget add it to AndroidManifest.xml and make a new button in MainActivity to jump to ReactActivity.
public class ReactActivity extends ExtendCordovaActivity {
@Override
public String getConfig() {
return "react";
}
@Override
public String getWebPagePath() {
return WebPagePath.INTERNAL_STORAGE;
}
}
- Create a new react.xml in App/src/main/res/xml which use react.html we just created.
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="1" id="com.jmengxy.cordovadroid" version="1.0.0" >
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<name>CordovaDroid</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="react.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />
<preference name="loglevel" value="DEBUG" />
</widget>
-
Go to App project directory and execute
python3 android-tools.py
, select build -> qa -> debug (type 1,1,1). The script starts to build ReactJS project and Native App, then upload generated web files to SD card. -
Run App from Android Studio, click REACT button. You would get following page.