- This article is Marno original, reprint must retain source!
- The public account [aMarno], after concern, reply RN to join the exchange group
- React Nativewww.marno.cn
One, foreword
All ofo functions are not implemented, only the main interface and logic are completed. It seems that the two core functions of [Map] and [Scan code] need some time, but the rest are relatively simple. Besides, there is no API and simulation data is not interesting, so it is not so complete.
Map: using Autonavi JS map, I in a previous article “Android fast map function (not only fast! But also small!)” This implementation has been mentioned, interested friends can click on the past to have a look, but this time with more functions. The advantage of using JS maps instead of native maps is that you don’t have to deal with cumbersome package dependencies, but the disadvantage is that the performance is worse than native maps. But the actual use, also can reach the level of normal use, not completely unusable.
Sweep the code: The function is a secondary development based on the React-Native Camera open source library. Some time ago, I also packaged it as an open source component and uploaded it to the NPM server. You can install it directly through NPM install AC-qrcode –save. Friends in need can go to my Github homepage to view, or in my blog before the article to find the next portal >>> juejin.cn/post/684490…
Ii. Screenshot preview
| Home page | Personal center | scan the code |
|---|---|---|
 |
 |
 |
3. Technical framework
- “React” : “6” 16.0.0 – alpha.
- “The react – native” : “0.43.1”
- “Native base”: “^2.1.1” (integrated framework)
- “React-navigation “: “^1.0.0-beta.7”
- “Ac-qrcode “: “^1.0.0”
- “React-native Simple-toast “: “0.0.5”
Iv. Warehouse Address:react-native-ofo
The operation steps of the project are as follows:
- Step 1: NPM install
- Step 2: React-native Link
- Step 3: React-native run-Android
Theoretically compatible with Android/iOS, but not on iOS real machine, only on virtual machine.
It is important to note that RN 0.43 will get an error when using “react-navigation”. Although it has been fixed in RN 0.44, I have not updated the version yet. A temporary solution can be found here: github.com/react-commu…
5. Project experience
As a rule, I like to summarize every faux project.
This is my second open source project that uses RN to copy, so there has been some progress in understanding and using RN compared with the react-Native eyepetizer. In addition, I am still learning some react knowledge to deeply understand the component life cycle. And take this as a starting point for performance optimization, this part of the content will be sorted into an article to share.
Back to this open source project, the most obvious is about the subcontracting structure adjustment, before the imitation of writing eyes, did not consider so much, think is the first entry again. However, with the deepening of learning, the logic to deal with gradually complex, reasonable and clear management code is very necessary.
| Imitation open eye project package structure | Imitation ofo project package structure |
|---|---|
 |
 |
A simple comparison is made directly with the above two pictures. The summary is as follows:
- Name the folder where pages are stored changed from Pages to Screens
- The Styles of the components in the page are managed in a separate file named “page name +Styles”, for example, HomeScreenStyles, which is easy to reuse and manage.
- Components that need to be reused are extracted into a separate class and stored in the Components package.
- Images, constants, colors, common styles, and other resources are managed by a single entry class, similar to the way resources are managed in Android, which is easier to maintain.
One final word on why Redux is not used
- The project was not complex enough to justify using Redux
- Mobx is easier to use if you just manage state
- Well… I’ll be honest, because I’m not very good at it.
