皮皮网

1.如何创建一个android的react-native组件
2.React Native框架写小程序，标源并运行在App的源码一种方法

如何创建一个android的react-native组件

       Step 1 - 新建react-native工程 ReactNativeToastAndroid

       $ react-native init ReactNativeToastAndroid1

       Step 2 - 将新建的工程导入android studio然后新建空library（以react-native-toast-android为library的名称）之所以要新建一个library而不在ReactNativeToastAndroid工程中写呢，主要是为了方便上传到npm及github上方便其他开发者使用，一般以react-native-xxx-android命名方便识别这是react-native组件。

       Step 3 - 新建空library（以react-native-toast-android为library的名称）

       åœ¨library目录下的build.gradle中添加react-native的依赖

       // file: android/react-native-toast-android/build.gradle

       â€¦

       dependencies {

       â€¦

       compile 'com.facebook.react:react-native:0..+'

       }

       Step 4 - 继承ReactContextBaseJavaModule ，大家可以很明显的发现show（）方法上多了一个‘@ReactMethod’，加上了‘@ReactMethod’的方法可以被js调用。

       public class AndroidToastModule extends ReactContextBaseJavaModule {

       private static final String DURATION_SHORT_KEY = “SHORT”;

       private static final String DURATION_LONG_KEY = “LONG”;

       public AndroidToastModule（ReactApplicationContext reactContext） {

       super（reactContext）；

       }

       @Override

       public String getName（） {

       return “ToastForAndroid”;

       }

       @Override

       public Map<String, Object> getConstants（） {

       final Map<String, Object> constants = MapBuilder.newHashMap（）；

       constants.put（DURATION_SHORT_KEY, Toast.LENGTH_SHORT）；

       constants.put（DURATION_LONG_KEY, Toast.LENGTH_LONG）；

       return constants;

       }

       @ReactMethod

       public void show（String message, int duration） {

       Toast.makeText（getReactApplicationContext（）， message, duration）。show（）；

       }

       }

       Step 5 - 继承ReactPackage，注意createNativeModules（）返回的是加入了 AndroidToastModule 的集合，createJSModules（）与createViewManagers（）返回的都是空集合，如果Step 4 步继承的是BaseViewManager或其子类，那么createViewManagers（）中返回的就是加入了BaseViewManager的集合，其他的就是空集合，一般情况createJSModules（）的返回值都是空集合。

       public class AndroidToastPackage implements ReactPackage {

       @Override

       public List<NativeModule> createNativeModules（ReactApplicationContext reactContext） {

       return Arrays.<NativeModule>asList（new AndroidToastModule（reactContext））；

       }

       @Override

       public List<Class<? extends JavaScriptModule》 createJSModules（） {

       return Collections.emptyList（）；

       }

       @Override

       public List<ViewManager> createViewManagers（ReactApplicationContext reactContext） {

       return Collections.emptyList（）；

       }

       }

       Step 6 - 新建ToastForAndroid.js，文件位置

       ' android/react-native-toast-android/ToastForAndroid.js ‘代码如下，然后在 'android/react-native-toast-android/’下运行如下命令生成package.json文件

       $ npm init //生成package.json文件1

       'use strict';

       var RCTToastAndroid = require（‘NativeModules’）。ToastForAndroid;

       var ToastForAndroid = {

       SHORT: RCTToastAndroid.SHORT,

       LONG: RCTToastAndroid.LONG,

       show: function （

       message: string,

       duration: number

       ï¼‰ï¼š void {

       RCTToastAndroid.show（message, duration）；

       },

       };

       module.exports = ToastForAndroid;

       Step 7 - 复制ToastForAndroid.js 文件到‘/ReactNativeToastAndroid/ ' 目录下，如下是index.android.js代码，然后运行测试

       'use strict';

       var React = require（'react-native’）；

       var {

       AppRegistry,

       StyleSheet,

       Text,

       Dimensions,

       TouchableHighlight,

       View,

       } = React;

       // var ToastForAndroid = require（‘react-native-toast-android’）；

       var ToastForAndroid = require（‘./ToastForAndroid’）；

       var deviceWidth = Dimensions.get（‘window’）。width;

       var deviceHeight = Dimensions.get（‘window’）。height;

       var ReactNativeSegmentedExample = React.createClass（{

       _onPressButton:function（）{

       ToastForAndroid.show（‘点击了！', ToastAndroid.SHORT）

       }）；

       },

       render: function（） {

       return （

       renderButton: function（） {

       return （

       <TouchableHighlight onPress={ this._onPressButton}>

       <Text style={ { width:deviceWidth,height:}}>click goto activity</Text>

       </TouchableHighlight>

       ï¼‰ï¼›

       },

       ï¼‰ï¼›

       }

       }）；

       â€¦

       Step 9 - 测试成功，在目录' /android/react-native-toast-android/ ’下运行命令：

       $ npm adduser //增加npm用户

       $ npm publish //上传react-naive-toast-android到npm上

       Step - 其他开发者使用你上传到npm上的组件方法（github上的模板）

React Native框架写小程序，并运行在App的标源一种方法

       跨平台应用开发的最佳技术选择一直是业界关注的焦点。

       Flutter和React Native作为构建跨平台移动应用的源码qq空间免费psd源码框架，都由各自的标源科技巨头谷歌和Facebook支持，这使得两者在未来竞争中有望更加完善。源码

       鉴于原生应用开发耗时且成本高，标源跨平台应用开发成为近年来的源码一大趋势，Flutter和React Native也逐渐成为移动开发社区中最受欢迎的标源框架。那么，源码开发者应该如何选择呢？本文将重点介绍React Native及其与小程序的标源医院的管理源码结合。

       React Native是源码Facebook在年推出的跨平台移动应用开发框架，主要使用JavaScript、标源JSX和CSS进行开发。源码这使得熟悉Web前端开发的标源开发者可以轻松进入移动应用开发领域，并利用代码共享功能加快开发进程。调试net core源码React Native的热重载功能允许开发者直接在运行中的应用程序中添加或纠正代码，进一步加速开发过程。

       React Native采用基于React的混合移动应用开发方法，不生成原生UI组件，而是vuejs源码怎么用基于React构建基于Web的交互界面，从而提供更丰富的UI体验效果。React Native已经成为流行的移动开发技术，同时也提供了使用JavaScript构建原生跨平台移动应用的强大框架。

       React Native需要注意的事项包括，虽然它已经成为受支持的oem源码独立开发开源社区的热门框架，但在使用某些功能（如UI导航或地图）时可能需要编写区别于平台的代码。对于复杂的应用，可能需要编写自定义组件或深入了解iOS和Android。

       React Native如何与小程序结合？我们可以将混合应用模式从“原生H5”改为“原生+小程序”，将小程序搬到App中运行。在React Native工程基础上集成FinClip小程序解析引擎，只需行代码即可完成小程序集成。

       FinClip官方提供了详细的环境搭建文档，项目运行稳定。在VSCode+Xcode开发组合环境下，你可以选择两种不同的方式运行App在iOS/Android平台。同时，ReactNative需要依赖本地安装对应的iOS、Android开发工具，即需要安装Xcode和AndroidStudio。

       在main.dart文件中，通过引入小程序引擎插件和初始化方法，即可实现小程序的打开。SDKKEY和Secret可以从部署的社区版管理后台获取，apiServer为小程序生态后端的服务地址，小程序id为在管理后台上架的小程序唯一ID。