React Native for windows 调用C#脚本（Native Modules）
React Native for windows 调用C#脚本（Native Modules）
本文主要建立在已准备好各种开发环境的操作指南基础之上，并且配备必要的软件：VS Code（Cons vs code），以及Visual Studio（仅指其开发环境）。访问微软官方文档获取React Native for Windows的详细指导：React Native for windows 官网。立即进入流程进行开发工作。
1:用管理员权限打开cmd，
输入cd F:\RnSdk\Demo
F:\RnSdk\Demo路径可以代替任意一个指定的文件夹位置来构建react-native项目
npx react-native init projectName
projectName可以替换成你想要得项目名（文件夹名称），等待安装完成
2：导航到这个新创建的目录
输入cd projectName
则项目名需更换为您选定的新名称，并与原有项目名保持一致
3：安装Windows扩展
安装React Native for Windows软件包
npx react-native-windows-init
npx react-native-windows-init --language cpp
这两个指令都默认安装C++项目
部署React Native Windows应用 - C#语言版
这里是一个专门用于部署C#项目的工具由于主要使用C#语言开发
启动项目
react-native start
接着就可以进行测试；此时程序的主界面已经打开了。这时候欢迎来到React Native界面吗？如果有任何问题，请留下您的留言。
5：编写C#代码
在vs项目中新建一个脚本FancyMath.cs,代码如下：
注册模块随后完成：首先，在项目目录中查找是否存在名为ReactPackageProvider的脚本文件；如果找不到该脚本，则需手动创建一个新的；随后，在CreatePackage方法内部注入该功能以实现属性化组件的支持；如图所示
然后检查项目 app.xaml.cs下有没有缺少这两句代码
确认完毕后，则可着手编写JavaScript代码用于调用C#功能。
6：编写JavaScript脚本
使用VSCode打开React Native开发环境，在App.js文件中进行基本调整
/** * Sample React Native App
* https://github.com/facebook/react-native
* * @format
* @flow strict-local
*/
import React from 'react';
import type {Node} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
Button,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { NativeModules, NativeEventEmitter } from 'react-native';
const FancyMathEventEmitter = new NativeEventEmitter(NativeModules.FancyMath);
const onButtonPress = () => {
alert('调用C#脚本，FancyMath.Pi：'+NativeModules.FancyMath.Pi+' FancyMath.E:'+NativeModules.FancyMath.E);
NativeModules.FancyMath.add(NativeModules.FancyMath.Pi, NativeModules.FancyMath.E,function (result) {
alert('Pi：'+NativeModules.FancyMath.Pi+' E:'+NativeModules.FancyMath.E+' '+result);
});
};
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Button title="我是按钮"
onPress={onButtonPress}
color="#841584">
</Button>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
};
export default App;
然后切换到Visual studio项目，点击即可，就能看到
点击 我是按钮，就能成功打印出C#的变量值，
在此，调用C#成功。