"React Native and Combat" book serial "ios Platform and React Native hybrid development"

This article is my published book "React Native and actual combat" serial sharing, the book by the mechanical Industry publishing house, the book detailed React Native framework underlying principles, React Native component layout, components and API Introduction and code combat, and React Nati ve and IOS, Android platform of the mixed development of the underlying principles and code demonstration, a selection of a large number of instance code, convenient for readers to learn quickly.

Books also supporting the video tutorial "80 Practical Lessons proficient React Native development", this video course is recommended to cooperate with the book study, the Book of the Central Plains rational explanation of the relatively clear, and video tutorials for components, APIs and other parts of the code of the actual development of the explanation is more intuitive.

For all books related information, please visit: http://rn.parryqiu.com

This chapter will explain in detail the principles of the hybrid development of the IOS platform under the React Native Framework and the detailed implementation methods, and still use the case for practical application learning. This chapter requires basic knowledge of the iOS platform development language objective-c or Swift and the iOS core class library.

Introduction to 11.1 IOS Platform hybrid development

When we need to use some iOS platform APIs, and the React Native framework does not yet provide the corresponding JavaScript API, we need to write our own React Native framework and the IOS platform combined with the hybrid development code, so that React Nat Ive framework can communicate directly with the native code of the IOS platform.
Other usage scenarios for hybrid development include reusing some existing objective-c, Swift, or C + + code, or writing high-performance or multithreaded code for image processing, databases, or some other advanced features. React Native all open the corresponding interface for developers to call.

Next in the principle of the chapter, we combine a simple example to explain in detail the React Native and IOS platform mixed development communication mechanism, this part of the content is slightly complex, may need to read and understand its underlying principle, and combined with small instances to learn, In the second part there will also be a real hybrid development example that continues to deepen your understanding of hybrid development.

This part of the content belongs to React Native development of high-level content, even if you do not have to grasp the React Native basic knowledge of the development of the APP, but understand and grasp this part, more help you understand React Native the underlying principle and implementation.

11.2 IOS Platform Hybrid development principle

In this chapter, by implementing the native code we wrote in Objective-c in the React Native framework, the function in Objective-c returns a simple string, React the Native frame through JavaScript The code gets the string to be displayed on the Text component in View. Although the functionality is simple, we have learned the principle of hybrid development in conjunction with the IOS platform in React Native, mainly through the implementation process of this simple function.

The process of hybrid development for IOS platforms includes the following processes:

1. Define the portal of the hybrid development in the native code of the IOS platform to communicate with the JavaScript code in the React Native;
2. Set compilation prerequisites for projects under the IOS platform;
3. Native functionality of the IOS platform implemented in the React Native project through JavaScript code calls to hybrid development.

Complete code in this book supporting the source of the 11-02 folder.

11.2.1 IOS native Code implementation

The native module uses the class definition of OBJECTIVE-C to implement the Protocol interface Rctbridgemodule for communication with the React Native framework, noting that RCT is an abbreviation for several uppercase letters taken by React.
First we initialize an empty project with the React Native CLI command, which is shown in command execution 11-1.

Figure 11-1 Initializing an empty project

Using Xcode to open the Xcodeproj project file under the iOS folder, the subsequent hybrid development will be done in Xcode.
We named our mixed-development module MyModule and set up two corresponding files in Xcode, one for the header file MyModule.h and the other for the class MYMODULE.M that were implemented using OBJECTIVE-C. You can select the file type in the Xcode new window when it is established, as shown in 11-2.

Figure 11-2 New file selection type under Xcode

The code initialized in the header file MYMODULE.M file uses the following code.

1.  #import "RCTBridgeModule.h"  2.    3.  @interface MyModule : NSObject <RCTBridgeModule>  4.    5.  @end  

The first line of code imports the protocol header file RCTBridgeModule.h that the React Native framework communicates with the native code.

In order to implement a class-to-RCTBridgeModule.h implementation, you also need a macro definition in the class that contains Rct_export_module (), and you can also pass in parameters in Rct_export_module () to name the custom native component. If the file name we defined earlier is MyModule, you can redefine the module name by passing the parameter, Rct_export_module (renamemymodule) so that the exported module is named Renamemymodule. If you do not pass parameters, you use the name of the class file, the name of MYMODULE.M, MyModule. If the module class file contains the file name at the beginning of the RCT, the final module name will automatically not contain the RCT string.

The code in the MYMODULE.M file is implemented as follows.

1.  #import "MyModule.h"  2.    3.  @implementation MyModule  4.    5.  // 需要包含的宏定义  6.  RCT_EXPORT_MODULE()  7.    8.  // 定义了一个返回的字符串  9.  - (NSDictionary *)constantsToExport {  10.   return @{@"hello": @"你好，这是我编写的第一个 iOS 原生模块！"};  11. }  12.   13. // 定义了一个可被调用的函数  14. RCT_EXPORT_METHOD(squareMe:(NSString *)number:(RCTResponseSenderBlock)callback) {  15.   int num = [number intValue];  16.   callback(@[[NSNull null], [NSNumber numberWithInt:(num*num)]]);  17. }  18.   19. @end  

This code defines a fixed string output, Constantstoexport, which returns a string called Hello. The second defines a function that can be called by React Native JavaScript code, which is very simple, which is to calculate the square of the passed int parameter and return the computed value.

The definition of a function needs to be explicitly defined using the Macro command Rct_export_method. The defined function is called asynchronously, so the definition of the function is not to return a value directly using return, unlike a fixed string return.
Squareme is the function name that defines the function, the parameter is a value of type NSString, the name is number, and the other parameter is a function callback function that gets the result of the native code execution.

The first parameter of the callback function is the wrong return (there is no error here to return a null), and the second is the computed value for the function callback to use.

11.2.2 IOS Project Compilation settings

As soon as the code is written, execute the project compilation in Xcode, and click on the Build command in Xcode, as shown in 11-3.

Figure 11-3 Xcode Project compilation

If you encounter fatal error at compile time: ' RCTBridgeModule.h ' file not found errors, that is, ' RCTBridgeModule.h files cannot be found, error 11-4 shows.

Figure 11-4 RCTBridgeModule.h file not found error

The workaround is to find the "Header Search Paths" Setting node under the project Settings "Build Settings" tab of Xcode and confirm that it contains the definition shown in 11-5, which adds $ (srcroot)/. The/node_modules/react-native/react value is defined and "recursive" is selected in the drop-down option.

Figure 11-5 Setting up the Search Paths for Xcode

Once you have made the settings above, compiling the project again will resolve the error.