Design And Implementation Of Prototype Design And Development Tool Based On React-Native

The Chinese Tobacco Industry makes an important role in the nation economy,and it is the important taxation source of our country.In recent years,front-end technology has developed rapidly.The front-end increasingly component and complexity,and with the rise of mixed-side mobile phone development and desktop program framework such as the emergence of electrons,front-end almost covered by the server to the browser to the mobile phone side to the desktop program so much development range.However,the problem also arises,for the increasingly full and even surplus front-end components,framework,in the transition of the developers,we need toregain the knowledge and expand the learning costs.And often because of each person's internal knowledge system is different from the choice of the framework is also different emphasis on the increase in the probability of changes in the framework,which inherited the past packaging,the development of outstanding components,no doubt no help.Through the analysis of the above problems and development requirements,this paper designs and implements a prototype design tool based on react-native,which uses the menu to assist the team management and maintenance of components,and through the internal implementation of the GUI system transparent application framework,so that the same team can use a tool to complete multiple end development tasks.The developer can use the prototype design tool,using the GUI auxiliary design module within the tool to quickly complete the prototype of the mobile app or web page and generate the code,so as to save the learning cost of technical researchThe prototype design tool based on react-native provides the runtime environment with the electron framework,and the electron is composed of the main thread and the UI thread,interacting with each other through message forwarding.The business allocation that needs to operate local resources and permissions needs is developed in the main thread,while the interface to the prototype design tool and the interface's messaging processing and remote data pull are allocated to the UI thread.The main thread part of the prototype is composed of IPC message forwarding module,source code grammar parsing module and local resource module.The IPC message forwarding module is responsible for sending messages to the UI thread,listening to UI threads and forwarding to other modules,such as menu,NPM configuration and so on.The source code syntax parsing module uses the Babylon plug-in to parse the source code,and converts it into a phrase tree and returns.The local resource module mainly completes file operation,local NPM component installation and configuration,and react-native project creation function.UI thread part can be divided into auxiliary UI design module,file module,editor module and component library module according to the front-end interface.The assistant UI design module is responsible for providing developers with functions such as real-time interface preview,attribute editing,node adding and deletion for react-native page files.The file module uses the interface of the file resource tree to provide the function of the operation file.When the development of the human parts is created or deleted on the resource tree,the file module writes the operation information into the IPC message and sends it to the IPC module of the main process,waiting for the operation to be completed.The editor module is responsible for other management operations,such as the creation and deletion of the editor,and the editor module is responsible for providing the latest content of the current file to the file module for file preservation.The component library module is responsible for dragging remote component library information and providing drag and drop function for generating component template code.The prototype design tools based on react-native mobile phone framework can solve the problem of efficiency and time cost related issues from three angles of component management,prototype design and transparency of the underlying application framework.At the same time,the prototype design tool takes into account the migration cost of IDE,and transplants the related modules for the Eclipse platform,so that the eclipse users can design the prototype based on the interface preview of the original ide to complete the react-native page file.