1:安裝環(huán)境
Node:18.9
React native :0.69.5
Expo:46.0.9
2:創(chuàng)建項目
npx create-expo-app expo-call-native-code
cd expo-call-native-code
3:安裝Android studio
https://developer.android.com/studio
4:啟動項目
expo run:android
5:用Android studio 打開 react native Android 文件夾
image-20220918094001473.png
6:在Android studio 創(chuàng)建CalendarModule class
public class CalendarModule extends ReactContextBaseJavaModule {
CalendarModule(ReactApplicationContext context) {
super(context);
}
@NonNull
@Override
public String getName() {
return "CalendarModule";
}
@ReactMethod
public void createCalendarEvent(String name, String location) {
Log.d("CalendarModule", "Create event called with name: " + name
+ " and location: " + location);
}
@ReactMethod
public String test() {
Log.d("==getConstants======","rrrr");
final Map<String, Object> constants = new HashMap();
constants.put("DEFAULT_EVENT_NAME", "New Event");
return "test====";
}
@ReactMethod
public void testCallBack(String name, String location, Callback callBack) {
Log.d("==testCallBack======","test===");
callBack.invoke("testCallback");
}
}
7:創(chuàng)建MyAppPackage class
public class MyAppPackage implements ReactPackage {
@NonNull
@Override
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new CalendarModule(reactApplicationContext));
return modules;
}
@NonNull
@Override
public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactApplicationContext) {
return Collections.emptyList();
}
}
8:向Android application注冊module
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHostWrapper(
this,
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new MyAppPackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
});
private final ReactNativeHost mNewArchitectureNativeHost =
new ReactNativeHostWrapper(this, new MainApplicationReactNativeHost(this));
@Override
public ReactNativeHost getReactNativeHost() {
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
return mNewArchitectureNativeHost;
} else {
return mReactNativeHost;
}
}
@Override
public void onCreate() {
super.onCreate();
// If you opted-in for the New Architecture, we enable the TurboModule system
ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
ApplicationLifecycleDispatcher.onApplicationCreate(this);
}
@Override
public void onConfigurationChanged(@NonNull Configuration newConfig) {
super.onConfigurationChanged(newConfig);
ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
}
/**
* Loads Flipper in React Native templates. Call this in the onCreate method with something like
* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(
Context context, ReactInstanceManager reactInstanceManager) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.zcdmaple.expocallnativecode.ReactNativeFlipper");
aClass
.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
.invoke(null, context, reactInstanceManager);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
9:前端代碼
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View ,Button,Alert,NativeModules} from 'react-native';
const { CalendarModule,IminPrintModule } = NativeModules;
export default function App() {
const buttonPress = () => {
console.log("button===press");
CalendarModule.createCalendarEvent('testName', 'testLocation');
}
const buttonPrint = () => {
console.log("button===print");
console.log("Printing......");
let type = "test" + "\n";
IminPrintModule.iminPrint(
type
);
}
const nativeReturn = () => {
console.log("nativeReturn===");
let test = CalendarModule.test();
console.log("CalendarModule.getConstants map",test);
}
const testCallBack = () => {
console.log("testCallBack====");
CalendarModule.testCallBack("fdf","test",(result) => {
console.log("CalendarModule.test================================",result);
})
}
const iminPrintStatus = () => {
console.log("iminPrintStatus====");
IminPrintModule.iminPrintStatus((resultSatus) => {
console.log("resultSatus======",resultSatus)
})
}
return (
<View style={styles.container}>
<Text>react native call native method</Text>
<Button
title="Press me"
onPress={() => buttonPress()}
/>
<Button
title="print"
onPress={() => buttonPrint()}
/>
<Button
title="nativeReturn"
onPress={() => nativeReturn()}
/>
<Button
title="testCallBack"
onPress={() => testCallBack()}
/>
<Button
title="iminPrintStatus"
onPress={() => iminPrintStatus()}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
10:運行效果
查看Android log 命定 adb -d logcat or adb logcat -v time >xxx/t.log
image-20220918101443311.png
