Taro's React Native development offers two ways to develop, one that separates the shell from the code, and one that combines the shell and the code in one development
- Shells are used to package debug or distribution installers.
- The code is the js code running on the shell
- Code repository for Taro shells/NervJS/taro-native-shell
In duxapp it goes even further, you don't need to pay too much attention to shells and stuff, you just need to install the compilation environment for Android and ios, and compile apk or ios with a single command, and this compilation process is highly bound to the modularity concept of duxapp, by specifying the--app= By specifying a different entry point, you can package up different projects, like the following
# Compile a debugged version of duxuiExample for Android
yarn android --app=duxuiExample
# Compile the IOS debug version of duxuiExample
yarn ios --app=duxuiExample
# Start the Metro code compilation service after successful compilation
yarn start --app=duxuiExample
Let me describe in detail how RN is optimized in duxapp
configurable
For Taro shells, or native React Native, there areandroid iosIn duxapp, the contents of these folders are automatically generated, so the configuration content that needs to be modified in these folders, such as package names, version numbers, new architectural switches, etc., are configured by means of a configuration file, without the need to modify specific files.
This configuration file is in the project configuration folderconfigs/duxuiExample/The duxuiExample is the one I've been working on through the--app=duxuiExample Designated Entry Module
The content of this configuration file is like the following, you can clearly see that the package name, name, version number and other information is configured for Android, and the same for IOS
const config = {
android: {
appid: '',
appName: 'duxUI Library',
versionCode: 2,
versionName: '1.1.0',
keystore: {
storeFile: '',
keyAlias: 'duxui', storePassword: 'TN626
storePassword: 'TN62eyasJAKm2ksD',
keyPassword: 'TN62eyasJAKm2ksD'
}
},
ios: {
BundleId: '', appName: 'dux'
appName: 'duxUI Library',
versionCode: 1,
versionName: '1.0.0', team: '',
team: '',
plist: {
'duxapp/': {
NSCameraUsageDescription: 'duxUI library needs to take a picture for uploading pictures in the app to change the avatar',
NSContactsUsageDescription: 'duxapp needs access to your address book to save customer information into the address book',
NSLocalNetworkUsageDescription: 'The app needs access to your local network for establishing a connection with the server',
NSLocationAlwaysAndWhenInUseUsageDescription: 'Uses your location information for map positioning and location selection',
NSLocationAlwaysUsageDescription: 'Use your location information for map targeting and location selection',
NSLocationWhenInUseUsageDescription: 'Use your location information for map targeting and location selection',
NSPhotoLibraryAddUsageDescription: 'The duxUI library needs to save the promo image to your album for sharing',
NSPhotoLibraryUsageDescription: 'The duxUI library needs to access the album for in-app image uploads to change avatars',
}
}
}
}
= config
Content Reproduction
Above this configuration file has solved most of the packaging needs to be used in the configuration, but you have developed RN, you will see that the certificate he is a file, here only specify the name of the certificate file, but did not specify the specific content of the certificate, and the packaging of an app, it is always necessary to have an app icon, including Android and iOS icons, then these contents, you can configure the file in the copy folder, these project files will be copied to the corresponding file location of Android or ios.
The contents of this folder look like this
Then you realize, again, as if the structure of these files, and how to generate them, is another headache, theduxapp-cliThe following is an example of a file that can be created automatically with just two simple commands.
The first is the Android certificate file, and it is important to note that this is the place to specify the--config=Instead of specifying--app=
yarn duxapp android keystore --config=duxuiExample
After successful creation, you need to manually put the configuration content printed on the command line into the appropriate location
Then comes the logo creation, which involves placing your project's logo file in the root directory of the configuration file, which is theconfigs/duxuiExample/
yarn duxapp rn logo --config=duxuiExample
After the command is successfully used, he will automatically place the logo in the corresponding position and you don't need to do any further actions
This is not simple, the following to see, how to use third-party plug-ins, such as WeChat plug-ins, Gaode map plug-ins, etc.
:::info
All of the above mentionedduxuiExample These are all examples from the UI Library Samples module project, so replace them in your project as appropriate.
:::
tripartite module
your project more or less with some third-party plugin.React NativeThe base module already contains a lot of basic common plugins that you can use with thetripartite moduleCheck out the included base plugin
The traditional method is to add them to the dependencies, and then modify the contents of the Android or ios folder according to the content of the document, in duxapp provides another way to realize the use of third-party plug-ins
Like this one.react-native-view-shotThe way to install the plugin is very simple, he only asks you to add him to the can be used in the dependencies of the
So let's combine the modules and add the dependency in the configuration file of the module you need to use this functionality, like this oneduxuiThe configuration file for the module is the same
{
"name": "duxui",
"description": "DUXUIstorehouse",
"version": "1.0.42",
"dependencies": [
"duxapp"
],
"npm": {
"dependencies": {
"b-validate": "^1.5.3",
"react-native-view-shot": "~3.8.0",
"react-native-fast-shadow": "~0.1.1",
"array-tree-filter": "^2.1.0"
}
}
}
In fact, most of the open source third-party plug-ins are like this, just add to the dependencies, repackaging can be used, but a very small number of plug-ins, he is to change some of the Android or ios inside the native content, such as the WeChat plug-ins, which requires quite a lot of changes, I based on the needs of his documents, listed below
Android:
- Add proguard
- newly built
For callback processing - newly built
For payment callback processing - increase
<package android:name="" />Whitelist for jumping to WeChat - increase
. - increase
.
ios：
- Need to add pod dependencies due to plugin bugs
pod 'WechatOpenSDK' - modifications
entry file - modifications
Some processing of documents - exist
Adding Schemes and BundleURLTypes and applinks - In the project configuration, add the
UniversalLink
Other:
- Fixing a bug in the current version via patch
The first step is still to add the dependency to the module
{
"name": "wechat",
"description": "End WeChat Module Dependencies,APPend-to-endh5extremity",
"version": "1.0.15",
"dependencies": [
"duxappReactNative"
],
"npm": {
"dependencies": {
"react-native-wechat-lib": "^3.0.4",
"wechat-jssdk": "^5.1.0"
}
}
}
So as mentioned earlier in duxapp, the contents of the Android and ios folders are automatically generated, so how do I handle these changes? Here's where the module update script provided by duxapp-cli comes in.
The processing script file for the microsoft plugin is located atsrc/wechat/update/The content of this file looks like this
// eslint-disable-next-line import/no-commonjs
= ({ config }) => {
const { android, option } = config
return {
// Stroke point insertion
insert: {
'android/app/': {
'content': `
##### microsoft ######
-keep class .** { *; }
-keep class .** { *; }
-keep class .** { *; }`
},
'ios/Podfile': {
'podEnd': ` pod 'WechatOpenSDK'`
},
'ios/duxapp/': {
import: ' #import ""',
'': ' ,WXApiDelegate'
},
'ios/duxapp/': {
import: '#import <React/>',
appDelegate: `// react-native-wechat-lib start
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
return [WXApi handleOpenURL:url delegate:self];
}
- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
restorableObjects))restorationHandler {
// trigger a callback method
[RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
return [WXApi handleOpenUniversalLink:userActivity
delegate:self];
}
// Universal Links configuration file, Ignore it if you don't use it.。
// ios 9.0+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
options:(NSDictionary<NSString*, id> *)options
{
// Triggers a callback event.
// trigger a callback event
[RCTLinkingManager application:application openURL:url options:options];
return [WXApi handleOpenURL:url delegate:self];
}
// react-native-wechat-lib end`
}
},
create: {
'android/app/src/main/java/cn/duxapp/wxapi/': `package ${}.wxapi;
import ;
import ;
import ;
public class WXEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
(getIntent());
finish();
}
}
`,
'android/app/src/main/java/cn/duxapp/wxapi/': `package ${}.wxapi;
import ;
import ;
import ;
public class WXPayEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
(getIntent());
finish();
}
}
`
},
android: {
xml: {
'app/src/main/': {
tag: {
queries: {
child: '<package android:name="" />'
}
},
attr: {
'android:name=".MainApplication"': {
child: `<activity
android:name="."
android:label="@string/app_name"
android:exported="true"
android:taskAffinity="${}"
android:launchMode="singleTask"
/>
<activity
android:name="."
android:label="@string/app_name"
android:exported="true"
/>`
}
}
}
}
},
ios: {
plist: {
'duxapp/': {
CFBundleURLTypes: [
{
CFBundleTypeRole: 'Editor',
CFBundleURLName: 'weixin',
CFBundleURLSchemes: [
option?.wechat?.appid || 'wx'
]
}
],
LSApplicationQueriesSchemes: ['weixin', 'wechat', 'weixinULAPI']
},
'duxapp/': {
'-domains': [
`applinks:${option?.wechat?.applinks || ''}`
]
}
}
}
}
}
This file exports a function whose parameter config is the current project's RN compilation configuration file, which can be used to obtain information such as package name, version number, and so on.
The function returns an object, each key in this object represents a different function, the following is a description of each of these keys
- insert is used to insert the content into the specified file in the specified location
- create is used to create a file in a specified location
- android where xml is used to handle the merging of xml files in Android, which is done using thexmldomrounding out
- ios where plist is used to merge the ios plist configuration file
For more details on this script file you need to readUsing Native Modules Learn more
Look at half a day, is not the feeling that this module processing is also quite complex, in fact, I have encapsulated a number of commonly used native modules, like this WeChat plug-in, you do not need to go back to the realization once again, you just need to install this WeChat module and add him to the dependencies of your project module can be used!
yarn duxapp app add wechat
And then it's likeduxuiExample The configuration file for this module is the same as thewechat Add it to the dependencies and recompile
{
"name": "duxuiExample",
"description": "uilibrary example",
"version": "1.0.13",
"dependencies": [
"duxui",
"duxcms",
"amap",
"echarts",
"wechat"
]
}
There are more modules available, so head over to the app store to check them out!/page/apps
summarize
Through the above instructions, you have a basic understanding of how duxapp handles the RN side of the development, there are a lot of details, but also need to go to the documentation to check out the/docs/course/rn/start
Combine this with the ui library, tool library, global styles and other methods provided by duxapp, and you'll be able to complete your app project in no time!
GitHub：/duxapp