• ReactNative如何在JS中引用原生自定义控件(rn变化太快,网上很多教程有坑,这个我研究后可用,特意分享)
  • 直接写一个Demo例子,有相关功底的肯定明白,会对特别的地方进行提醒,本文基于https://blog.csdn.net/lintcgirl/article/details/53489490,但是按此链接文章不可用。

    首先是JAVA部分:

     1 import com.facebook.react.ReactActivity;
     2 
     3 public class MainActivity extends ReactActivity {
     4 
     5     /**
     6      * Returns the name of the main component registered from JavaScript.
     7      * This is used to schedule rendering of the component.
     8      */
     9     @Override
    10     protected String getMainComponentName() {
    11         return "RNMyTest";
    12     }
    13 }
     1 import android.app.Application;
     2 
     3 import com.facebook.react.ReactApplication;
     4 import com.facebook.react.ReactNativeHost;
     5 import com.facebook.react.ReactPackage;
     6 import com.facebook.react.shell.MainReactPackage;
     7 import com.facebook.soloader.SoLoader;
     8 import com.rnmytest.view.AppReactPackage;
     9 
    10 import java.util.Arrays;
    11 import java.util.List;
    12 
    13 public class MainApplication extends Application implements ReactApplication {
    14 
    15   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    16     @Override
    17     public boolean getUseDeveloperSupport() {
    18       return BuildConfig.DEBUG;
    19     }
    20 
    21     @Override
    22     protected List<ReactPackage> getPackages() {
    23       return Arrays.<ReactPackage>asList(
    24           new MainReactPackage(),
    25               new AppReactPackage()
    26       );
    27     }
    28 
    29     @Override
    30     protected String getJSMainModuleName() {
    31       return "index";
    32     }
    33   };
    34 
    35   @Override
    36   public ReactNativeHost getReactNativeHost() {
    37     return mReactNativeHost;
    38   }
    39 
    40   @Override
    41   public void onCreate() {
    42     super.onCreate();
    43     SoLoader.init(this, /* native exopackage */ false);
    44   }
    45 }

    第一坑,之前的项目可能创建时间太久,ReactApplication完全无法引用,后面我是重新新建一个demo测试后能成功导入,各种百度google无法解决这个方案,如有能解决的朋友请告诉我。

    下面是自定义的view

     1 import com.facebook.react.ReactPackage;
     2 import com.facebook.react.bridge.NativeModule;
     3 import com.facebook.react.bridge.ReactApplicationContext;
     4 import com.facebook.react.uimanager.ViewManager;
     5 import java.util.Arrays;
     6 import java.util.Collections;
     7 import java.util.List;
     8 
     9 /**
    10  * Created by bingmingli on 2018/6/8.
    11  */
    12 
    13 public class AppReactPackage implements ReactPackage {
    14 
    15     @Override
    16     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    17         return Collections.emptyList();
    18     }
    19 
    20 //    @Override
    21 //    public List<Class<? extends JavaScriptModule>> createJSModules() {
    22 //        return Collections.emptyList();
    23 //    }
    24 
    25     @Override
    26     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    27         return Arrays.<ViewManager>asList(
    28                 new CircleManager()
    29         );
    30     }
    31 }

    第二坑:注释部分的方法在新版本已经去除了

     1 import android.content.Context;
     2 import android.graphics.Canvas;
     3 import android.graphics.Paint;
     4 import android.util.Log;
     5 import android.view.View;
     6 
     7 import com.facebook.react.uimanager.PixelUtil;
     8 
     9 public class CircleView extends View {
    10     private final String TAG = "CircleView";
    11     private Paint mPaint; // 画笔
    12     private float mRadius;  // 圆的半径
    13 
    14     public CircleView(Context context) {
    15         super(context);
    16         mPaint = new Paint();
    17         mPaint.setColor(0xAA000000);
    18     }
    19 
    20     /**
    21      * 设置圆的半径
    22      * @param radius
    23      */
    24     public void setRadius(Integer radius) {
    25         /**
    26          * 由于JS传过的数字是dip单位,需要转换为实际像素
    27          * 使用com.facebook.react.uimanager包中的PixelUtil,进行转换
    28          */
    29         mRadius = PixelUtil.toPixelFromDIP(radius);
    30         invalidate();
    31     }
    32 
    33     @Override
    34     protected void onDraw(Canvas canvas) {
    35         super.onDraw(canvas);
    36         canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // 画一个半径为100px的圆
    37         Log.d(TAG, "绘图");
    38     }
    39 }
     1 import com.facebook.react.uimanager.SimpleViewManager;
     2 import com.facebook.react.uimanager.ThemedReactContext;
     3 import com.facebook.react.uimanager.annotations.ReactProp;
     4 
     5 /**
     6  * Created by bingmingli on 2018/6/8.
     7  */
     8 
     9 public class CircleManager extends SimpleViewManager<CircleView> {
    10 
    11     /**
    12      * 设置js引用名
    13      */
    14     @Override
    15     public String getName() {
    16         return "MCircle";
    17     }
    18 
    19     /**
    20      * 创建UI组件实例
    21      */
    22     @Override
    23     protected CircleView createViewInstance(ThemedReactContext reactContext) {
    24         return new CircleView(reactContext);
    25     }
    26 
    27     /**
    28      * 传输半径参数
    29      */
    30     @ReactProp(name = "radius")
    31     public void setRadius(CircleView view, Integer radius) {
    32         view.setRadius(radius);
    33     }
    34 }

    下面是JS部分:

    circle.js

     1 import React, { Component } from 'react';
     2 import {
     3   View,
     4   requireNativeComponent
     5 } from 'react-native';
     6 
     7 import PropTypes from 'prop-types'
     8 // const RCTCircle = requireNativeComponent('MCircle', {
     9 //   propTypes: {
    10 //     radius: PropTypes.number,
    11 //     ...View.propTypes // 包含默认的View的属性
    12 //   },
    13 // });
    14 // module.exports=RCTCircle;
    15 
    16 var iface = {
    17   name: 'MCircle',
    18   propTypes: {
    19     radius: PropTypes.number,
    20     ...View.propTypes
    21   },
    22 };
    23  
    24 module.exports = requireNativeComponent('MCircle', iface);

    第三坑:PropTypes的导入方式为import PropTypes from 'prop-types'
    第四坑:...View.propTypes这个必须有,不然自己的属性不能识别
    第五坑:iface里面的name 与 requireNativeComponent的第一个参数需要一致,很多教程这里不一致,导致找不到这个原生view

    App.js

     1 import React, { Component } from 'react';
     2 import {
     3   Platform,
     4   StyleSheet,
     5   Text,
     6   View
     7 } from 'react-native';
     8 
     9 import MCircle from './circle';
    10 
    11 const instructions = Platform.select({
    12   ios: 'Press Cmd+R to reload,
    ' +
    13     'Cmd+D or shake for dev menu',
    14   android: 'Double tap R on your keyboard to reload,
    ' +
    15     'Shake or press menu button for dev menu',
    16 });
    17 
    18 export default class App extends Component<Props> {
    19   render() {
    20     return (
    21                 <View>
    22                     <MCircle
    23                           style={{width: 100, height: 100}}
    24                           radius={50}
    25                     />
    26                 </View>
    27             ); 
    28   }
    29 }
    30 
    31 const styles = StyleSheet.create({
    32   container: {
    33     flex: 1,
    34     justifyContent: 'center',
    35     alignItems: 'center',
    36     backgroundColor: '#F5FCFF',
    37   },
    38   welcome: {
    39     fontSize: 20,
    40     textAlign: 'center',
    41     margin: 10,
    42   },
    43   instructions: {
    44     textAlign: 'center',
    45     color: '#333333',
    46     marginBottom: 5,
    47   },
    48 });

    提醒:导入的view必须名字也一致,这不用多说了

  • 相关阅读:
    何在C语言中判断socket是否已经断开
    使用 IntraWeb (41) 数据控件速查
    使用 IntraWeb (40) 自定义 Session 数据
    搭建 Kubernetes 高可用集群
    活下来 你才有进化的机会,唯一不变的就是持续变化(有理想的人是花40年把中国做到世界第二,然后再做到第一。商业是所有结合体,就这还有运气不好只说呢。不能战术上勤奋,战略上懒惰)
    学习懈怠的时候,可以运行Qt自带的Demo,或者Delphi控件自带的Demo,或者Cantu书带的源码,运行一下Boost的例子(搞C++不学习Boost/Poco/Folly绝对是一大损失,有需要使用库要第一时间想到)(在六大的痛苦经历说明,我的理论性确实不强,更适合做实践)
    神贴真开眼界:为什么很多人倡导重视能力和素质,但同时对学历有严格要求?——代表了上一场比赛的输赢,招聘成本很重要。如果上一场游戏失败了,尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已,但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good
    原生时代 来看看十年前李彦宏、马化腾和马云对云计算的评价
    .NET 在云原生时代的蜕变,让我在云时代脱颖而出
    Mac添加自定义启动图标到Launchpad
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文地址:https://www.cnblogs.com/lee0oo0/p/9157021.html
走看看 - 开发者的网上家园