Abstract: 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:
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:
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:
JSX, index. HTML, index.web.js, webpack.config.js.
react-native-web
Then add build and Web scripts to package.json:
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 download the web page;
Sudo 755 Android /gradlew
3. Change the React Native entry file to app. web, otherwise only the Web can read app.web. js.
4. Properly execute./gradlew clean re-yarn Android, etc.
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:
- 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.
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 for more details. In this case, we used three plug-ins:
- HtmlWebpackPlugin creates HTML;
- HotModuleReplacementPlugin for thermal module reshipment;
- DefinePlugin defines variables such as __DEV__ or react-native Web in NODE_ENV.
- 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 a suffix of ‘.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.
This article is shared by Hu Qi from the React Native Project Web Side Isomorphism.
Click to follow, the first time to learn about Huawei cloud fresh technology ~