React Native for windows 调用C#脚本（Native Modules）

React Native for windows 调用C#脚本（Native Modules）

本编文章主要基于已经安装好了各种环境得操作篇，必备软件：VsCode，Visual studio
React Native for windows 官网
那么。直接上流程；

1:用管理员权限打开cmd，

输入cd F:\RnSdk\Demo

F:\RnSdk\Demo可以替换成任何你得任何文件夹，用于创建react-native项目，
然后输入

npx react-native init projectName

projectName可以替换成你想要得项目名（文件夹名称），等待安装完成

2：导航到这个新创建的目录

输入cd projectName

projectName可以替换成你想要得项目名（文件夹名称），和之前得projectName相同即可

3：安装Windows扩展
安装React Native for Windows软件包

npx react-native-windows-init
npx react-native-windows-init --language cpp
这两个指令都是都是默认安装C++项目

npx react-native-windows-init --language cs
这个是安装C#项目，（笔者主要使用C#，故安装的这个）

4：打开项目
进入项目文件夹，能看到一个windows的文件夹，双击进去，双击后缀为.sln的文件，即可打开项目，打开项目后，在左上角文件选项按钮下有个Debug，arm，把arm选成X64或者X86，在之前的cmd中输入

react-native start

然后即可运行测试，此刻程序主界面便进去了。这时候能看到 welcome to React Native 了，如果有什么问题可留言。

5：编写C#代码
在vs项目中新建一个脚本FancyMath.cs,代码如下：

然后，注册模块：找到项目里面名为ReactPackageProvider的脚本，如果没有就创建一个，在CreatePackage方法里面添加 packageBuilder.AddAttributedModules();
如图所示

然后检查项目 app.xaml.cs下有没有缺少这两句代码

检查无误后，那么可以开始编写js代码，用于调用C#代码了。
6：编写js代码
用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#成功。