Using JavaScript to develop mobile apps seems to be a popular choice for many small factories. As a Copy engineer with rich experience, the small workshop I work for adopts React Native. Although React Native is in its sixth year as open source, a 1.0 release is still a long way off. “Learn once, write anywhere” does not affect React Native to become a framework that can be used without JavaScript. How to introduce React Native Web into React Native projects?

The react – native – web profile

Warehouse address: github.com/necolas/rea…

React-native Web is an open source project implemented and maintained by Nicolas Gallagher, a former Twitter engineer and now Facebook engineer. It is a library that enables react Native components and apis to run on the Web. React Native Windows, React Native macOS and other libraries extend React Native to new platforms. Twitter, Expo, MLS Soccer, Flipkart, Uber, The Times, DataCamp, and our small workshop all use the React-Native Web in production. Chrome, Firefox, Edge, Safari 7 +, and IE 10+ all support Web applications built using the React-Native Web. Of course, it’s worth noting that the official documentation explicitly states that components and apis that are not recommended in React Native are not supported, so if you rely on third-party libraries for some of the functionality in your project, that functionality may need to be handled in an additional way when it’s isomorphic on the Web.

It is simply considered that the React Native Web is to adapt the React Native components and apis with web-applicable labels and apis to make the behavior on the Web as consistent as possible as the native application. You can get a sense of this from the documentation of the Alert and Setting modules and their corresponding source code, such as TextInput:

  switch (keyboardType) {
    case 'email-address':
      type = 'email';
      break;
    case 'number-pad':
    case 'numeric':
      inputMode = 'numeric';
      break;
    case 'decimal-pad':
      inputMode = 'decimal';
      break;
    case 'phone-pad':
      type = 'tel';
      break;
    case 'search':
    case 'web-search':
      type = 'search';
      break;
    case 'url':
      type = 'url';
      break;
    default:
      type = 'text';
  }
  if (secureTextEntry) {
    type = 'password';
  }
Copy the code

Therefore, React Native code is also used as the basis for adaptation.

If you want to implement the multi-terminal unified solution based on React Native, you can refer to the implementation solution of qunar front-end team: Cross-terminal development, warehouse address: github.com/qunarcorp/q…

Add to the React Native project

Generally, expo-CLI or React-native CLI can be used to create React Native projects. Expo – CLI already has Web support, as shown in the following figure.

React-native cli scaffolding can be used to build projects. How to introduce react-native Web?

We first initialize the project:

NPX react-native init rn_web # NPX react-native init rn_web --template react-native template-typescriptCopy the code

At this point our project does not support use on the Web:

In order for the project to run in the Web environment, we need to use today’s protagonist — React-Native Web. Welcome the protagonist:

cd rn_web
yarn add react-native-web
yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack
Copy the code

JSX, index. HTML, index.web.js, webpack.config.js.

curl -L https://gist.github.com/hu-qi/bde8a6d2b45325d93b1665174f938faa/download | tar -xvz --strip-components=1
Copy the code

Then add build and Web scripts to package.json:

"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
"web": "webpack serve --mode=development --config webpack.config.js"
Copy the code

As with the expo- CLI initialization project, yarn Web can be executed, and a service will be run locally on port 8080, Then we respectively carry out the yarn ios and yarn android can see in the ios simulator and android simulator showed the same page and web end, once the react – native – web multiterminal isomorphism Hello World is successful, Of course, this also means that we may compile into a small program, later have the opportunity to discuss together!

Points to note here:

  1. The code can be copied successfully by ladder, of course, you can also choose to go to the web download;
  2. Android works because of permissionssudo 755 android/gradlew;
  3. The React Native import file must be changed to app. web. Otherwise, it can be read only on the WebApp.web.js;
  4. Appropriate to perform./gradlew cleanagainyarn androidSuch as years of experience accumulation SAO operation troubleshooting.

To explore the code

The key operation is the Copy code command, so what does the file downloading 4 do? Talk is cheap, show me the code, open the file and look at the code.

  • index.html

    Common single-page application entries, like the div in the code below, are called “root” DOM nodes because everything in them will be managed by the React DOM. In the current case, we just set some basic styles so that the body div has the full height and width:

     <html>. .<body> 
    <div id =" app-root"> </ div> 
  </ body> 
</ html>
Copy the code

  • index.web.js

    The index.web.js extension allows the file to be used only on the Web, while other available extensions such as.native. Js,.ios.js and.android.js are available on mobile. Of course, if you want to keep the code for different ends of the Platform in a single index.js file, you can use import {Platform} from ‘react-native’ to conditionally differentiate the code for different platforms. See the React Native documentation for more information on platform-specific code.

    . . AppRegistry. RunApplication (appName, {initialProps: {}, rootTag:documentDocument.getelementbyid ('app-root'});Copy the code

    This is very similar to index.js on our mobile, but it also mounts your application to the index.html div in the root directory.

  • webpack.config.js

    Webpack is the focus, but it’s not covered here. Please go to the official documentation or the Nuggets community for more details. In this case, we used three plug-ins:

    • HtmlWebpackPluginCreate an HTML;
    • HotModuleReplacementPluginUsed for reinstalling hot modules.
    • DefinePluginDefine variables, for example__DEV__orNODE_ENVIn thereact-native-web.

  • App.web.tsx

    This file is a temporary addition to verify that our setup works before using React Native Web isomorphism. Finally, you can delete this file because the App’s entry JS file can run on mobile as well as on the Web. But to handle something that works on the Web but doesn’t work on mobile, you need to extract the code and store it in files with the suffix ‘ ‘.web.js’.

Afterword.

Combined with the simple case mentioned above, we can gradually try the isomorphism business to Web and verify it step by step in the subsequent actual business.

I hope this article will inspire you, and I hope you can give me more advice! The comments section is always open!