[英]How to Import Create Module in Expo or React-native?
After doing 'expo init', I entered 'expo eject' and separated it. 完成“ expo init”后,我进入“ expo弹出”并将其分离。
I made a basic 'jar' file to test application to App.js using 'jar' file. 我制作了一个基本的“ jar”文件,以使用“ jar”文件测试App.js的应用程序。
The implementation is simple. 实现很简单。
CreateAJarFile.class in jar: jar中的CreateAJarFile.class:
class CreateAJarFile {
public static void main(String args[]) {
System.out.println("We got test");
}
}
bild.gradle(app): bild.gradle(app):
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation files('libs/myJarFile.jar')
After applying Android, I made a module to write modules on 'Apps.js'. 应用Android之后,我制作了一个模块来在“ Apps.js”上编写模块。
android/app/src/main/java/com/myjarfile android / app / src / main / java / com / myjarfile
CreateAJarFile.java: CreateAJarFile.java:
package com.myjarfile;
import android.widget.Toast;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;
public class CreateAJarFile extends ReactContextBaseJavaModule {
private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";
public CreateAJarFile(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "CreateAJar";
}
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap<>();
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}
@ReactMethod
public void show() {
System.out.println("We got test");
}
}
CreateAJarFilePackage.java: CreateAJarFilePackage.java:
package com.myjarfile;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class CreateAJarFilePackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new CreateAJarFile(reactContext));
return modules;
}
}
CreateAJar.js: CreateAJar.js:
import { NativeModules } from "react-native";
const { CreateAJar } = NativeModules;
export default CreateAJar;
android/app/src/main/java/host/exp/exponent/MainApplication.java android / app / src / main / java / host / exp / exponent / MainApplication.java
import com.myjarfile.CreateAJarFilePackage;
...
public List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
// Add your own packages here!
// TODO: add native modules!
// Needed for `react-native link`
// new MainReactPackage()
new CreateAJarFilePackage());
}
I made a module like this, added it, and tested it on App.js. 我制作了一个这样的模块,添加了它,并在App.js上对其进行了测试。
import CreateAJar from "./android/app/src/main/java/com/myjarfile/CreateAJar";
export default class App extends React.Component {
...
this.jarfunc = this.jarfunc.bind(this);
...
jarfunc() {
CreateAJar.show();
}
...
return (
<View style={styles.container}>
<Text>Test</Text>
<Text>{this.jarfunc}</Text>
</View>
However, both the module and the function could not be read. 但是,模块和功能均无法读取。
How do I apply the module I created to 'App.js'? 如何将我创建的模块应用于“ App.js”?
This was more of an emulator problem than a code problem. 这更多的是模拟器问题,而不是代码问题。 Of course, I was on my guard because there was an error about the code.
当然,我很警惕,因为有关代码的错误。
Anyone can be confused because it is often an error in expo
. 任何人都可能会感到困惑,因为这通常是
expo
的错误。
bundle gradle(app)
: bundle gradle(app)
:
complie sdk version: 27
...
target sdk version: 26
...
Sucess Use Page 成功使用页面
import {
NativeModules,
...
} from "react-native";
const { CreateAJar } = NativeModules;
export default class App extends React.Component {
...
this.jarfunc = this.jarfunc.bind(this);
...
jarfunc() {
CreateAJar.show();
}
...
return (
<View style={styles.container}>
<Text>Test</Text>
<Text>{this.jarfunc}</Text>
</View>
In this setting, the code will operate above anroid 8.0
. 在此设置下,代码将在
anroid 8.0
以上anroid 8.0
。
To operate below android 8.0
, the target version
must be lowered to 25
. 要在
android 8.0
以下运行, target version
必须降低到25
。
If the method is related to view
, the error may occur for the first time, but Reload
will work normally. 如果该方法与
view
有关,则可能是第一次发生该错误,但Reload
将正常工作。
And one more important thing is that when you use @ReactMethod
, @ReactMethod
only works when you set the return type to void
. 还有一件重要的事情是,当您使用
@ReactMethod
, @ReactMethod
仅在将返回类型设置为void
时才起作用。 If you write int,String,number,bolean
, etc., it will not work. 如果您编写
int,String,number,bolean
等内容,它将无法正常工作。
If you want to run, change the function internal type after switching to void
or give the setting condition to @ReactMethod
. 如果要运行,请在切换为
void
或将设置条件设置为@ReactMethod
之后,更改函数的内部类型。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.