2018-03-02 11:15:30 WOL965 阅读数 219
  • React Native 跨平台响应式布局

    React Native跨平台布局视频教程,React Natiev的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本次分享集中讲解 Flexbox 的原理,以及 Platform、Dimensions API的用法。并结合具体例子,介绍如何具体实现跨平台响应式的布局,后再介绍一些布局相关的开源项目。

    2813 人正在学习 去看看 CSDN讲师

现如今React-Native尚未成熟,在开发过程中自然少不了与原生native的交互与数据传递。学习过程中查了一些资料,主要有以下三种方式:

方式 优点 缺点
事件方式:RCTDeviceEventEmitter 可任意时刻传递,Native主导控制 个人觉得此种方式缺点小
CallBack回调方式 JS调用一次,Native返回一次 CallBack为异步操作,返回时机不确定
Promises 方式 JS调用一次,Native返回一次 每次使用需要JS调用一次

 

步骤:

1、JS文件导入NativeModules组件 

import {NativeModules} from 'react-native';

 

2、在android中创建一个类继承自ReactContextBaseJavaModule,并定义一些native方法供RN调用。 

public class ExampleInterface extends ReactContextBaseJavaModule {


    private ReactApplicationContext mContext;

    public ExampleInterface(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext = reactContext;
    }

    @Override
    public String getName() {
        return "ExampleInterface";
    }

下面的NativeModules.ExampleInterface就是获取这个类的实例,而getName就是返回该类的名字

 

3、在你自定义的ReactPackage的实现类的createNativeModules方法里添加ExampleInterface的实例并返回

public class AnExampleReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        ArrayList<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new ExampleInterface(reactContext));
        return nativeModules;
    }    

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    public List<Class<? extends JavaScriptModule>> createJSModules(){
        return Collections.emptyList();
    }
}

 

4、然后在你自定义的ReactApplication的实现类的getPackages方法里返回AnExampleReactPackage的实例

public class ReactApp extends Application implements ReactApplication {

    private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    /*将我们自定的包管理加入*/
                    new AnExampleReactPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index.android";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, false);
    }

}

 

交互方式的具体使用:

1 RCTDeviceEventEmitter:

/**
 * 向RN发送消息
 *
 * @param msg
 */
private void sendMsgToRN(String msg) {
    mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("AndroidToRNMessage", msg);
}
/**
 *JS接收回调
 */
 componentWillMount() {
     DeviceEventEmitter.addListener('AndroidToRNMessage', this.handleAndroidMessage.bind(this));
 }
 
 
 handleAndroidMessage(androidMeg) {
     this.setState({msg: androidMeg});
 }

 

2 CallBack回调:

/**
 * native端让JS端调用的方法,并将msg回调给JS
 */
@ReactMethod
public void handleCallback(String msg, Callback callback) {
    callback.invoke(msg);
}
/**
 * JS端调用native端handleCallback方法
 */
NativeModules.ExampleInterface.handleCallback('JS Callback', (msg) => {
        alert(msg);
    });

 

3 Promises 方式:

/**
 *ative端让JS端调用的方法,用Promise时,Promise参数需要放在最后一个参数里,否则JS接搜不到消息
 */
@ReactMethod
public void handlePromise(String msg, Promise promise) {
    try {
        promise.resolve(msg);
    } catch (Exception e) {
        promise.reject(e);
    }
}
/**
 * NativeModule.ExampleInterface.handlePromise 返回的是一个Promise对象,
 * JS端通过then接口来获取Promise的数据。
 */
NativeModules.ExampleInterface.handlePromise('Promise')
.then((msg) => { alert(msg); })
.catch((error) => { console.log(error) });
    

 

 

2018-01-30 11:27:16 HaveATrip 阅读数 1196
  • React Native 跨平台响应式布局

    React Native跨平台布局视频教程,React Natiev的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本次分享集中讲解 Flexbox 的原理,以及 Platform、Dimensions API的用法。并结合具体例子,介绍如何具体实现跨平台响应式的布局,后再介绍一些布局相关的开源项目。

    2813 人正在学习 去看看 CSDN讲师



Appium原生Native界面元素和网页Webview元素切换

               

def ChangeWebview(self):
    '''切换到webview'''
    sleep(5)#此处加上睡眠等待,此时向服务器请求数据,一般数据量多时,会获取不到webview和native的界面元素
    d = self.tool.MyDriver() #调用appium中的driver,tool是用来引用driver
    list = d.contexts  #将获取到的添加到集合list
    sleep(3)
    print(list)#打印查看

    for con in list:
        if con.lower().startswith('webview'):#if判断若是以webview开头就切换
            sleep(2)
            d._switch_to.context(con)
    print(d.context) #打印出切换到的界面
注释已加在每行代码之后,切换到native界面元素时只需将if中的webview换成native即可
2015-12-09 12:00:46 MyName_kk 阅读数 564
  • React Native 跨平台响应式布局

    React Native跨平台布局视频教程,React Natiev的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本次分享集中讲解 Flexbox 的原理,以及 Platform、Dimensions API的用法。并结合具体例子,介绍如何具体实现跨平台响应式的布局,后再介绍一些布局相关的开源项目。

    2813 人正在学习 去看看 CSDN讲师

最近一段时间,在公司开发了一个web版的APP,由于原来基本上都是开发原生的APP。因此,做完后对比一下,发现两者之间的差别还是有那么大的,尤其是在一些特殊情况下,两者是无法相互替代的。同时在网上也查阅了很多资料,总结出两者之间的如下区别。

Native App开发
Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
Native App(原生型APP)应用呈现以下特点:
(1)每次获取最新的APP功能,需要升级APP应用;
(2)原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;
(3)手机用户无法上网也可访问APP应用中以前下载的数据。
(4)原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
(5)APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。
适用企业:游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
Web App开发
Web App开发即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。
Web APP应用呈现以下特点:
(1)每次打开APP,都要通过APP框架向云网站取UI及数据;
(2)手机用户无法上网则无法访问APP应用中的数据。
(3)框架型的APP无法调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
(4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;
(5)框架型APP应用的安装包小巧,只包含框架文件,而大量的UI元素、数据内容刚存放在云端;
(6)APP用户每次都可以访问到实时的最新的云端数据;
(7)APP用户无须频繁更新APP应用,与云端实现的是实时数据交互;
适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

总结
移动Web无所不在,移动Web是目前唯一的支持各种设备访问的平台,与桌面Web一样,移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与桌面任务有效地连接了起来;而开发Native App可以充分利用设备的特性,而这一点往往是Web浏览器做不到的,所以对一个产品本身而言,Native App是最佳的选择。

2015-09-24 01:12:55 wenniuwuren 阅读数 4072
  • React Native 跨平台响应式布局

    React Native跨平台布局视频教程,React Natiev的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本次分享集中讲解 Flexbox 的原理,以及 Platform、Dimensions API的用法。并结合具体例子,介绍如何具体实现跨平台响应式的布局,后再介绍一些布局相关的开源项目。

    2813 人正在学习 去看看 CSDN讲师
零.  前言

简单的查询一般都使用 HQL , 开发效率会比较高, 但是复杂的查询如果前期用 HQL , 那么后期出现慢查询, 就不得不用 原生 SQL 重写一遍, 要是滥用 HQL 返回各种对象, 用对象到处操作, 最后的慢查询调优简直就是条不归路。 笔者最近在做一个 10 年老项目的慢查询调优, 深有感悟, 本文只介绍 Hibernate 如何使用原生 SQL, 调优工作请看笔者其他文章。



一.  代码示例

使用原生 SQL 的工具类: 

public SQLQuery findQueryByNativeSQL(final String sql, final List values, final int first, final int limit) {
   Object obj = this.getHibernateTemplate().execute(new HibernateCallback() {

      @Override
      public Object doInHibernate(Session session) throws HibernateException, SQLException {

         SQLQuery query = session.createSQLQuery(sql);
         query.setCacheable(true);
         if (values != null) {
            for (int i = 0; i < values.size(); i++) {
               query.setParameter(i, values.get(i));
            }
         }

         if (first > 0) {
            query.setFirstResult(first);
         }
         if (limit > 0) {
            query.setMaxResults(limit);
         }
         return query;
      }
   });
   if (obj != null) return (SQLQuery) obj;
   return null;
}



分页查询调用示例:

SQLQuery query = this.findQueryByNativeSQL(sql.toString(), values, pge * limit, limit);


举个最复杂的例子:可能返回内容比较复杂, 有对象, 有字段, 那么就需要有一个独立的 DTO 类去映射:

public class ArticleDTO implements Serializable {
 private Integer id;
private ArticleMeetingProp articleMeetingProp;
public ArticleMeetingProp getArticleMeetingProp() {
    return articleMeetingProp;
}

public void setArticleMeetingProp(ArticleMeetingProp articleMeetingProp) {
        this.articleMeetingProp = articleMeetingProp;
}
public Integer getId() {return id;}
public void setId(Integer id) {
this.id = id;
}
}



然后是上面返回的 query 的一些配置:

query.addEntity("articleMeetingProp", ArticleMeetingProp.class);
//query.addScalar(“id", Hibernate.INTEGER);  //如果字段有别名
query.setResultTransformer(Transformers.aliasToBean(ArticleDTO.class));


最终得到自定义的 DTO:

List<ArticleDTO> articleDTOList = query.list();



2019-08-08 09:06:34 u011216417 阅读数 74
  • React Native 跨平台响应式布局

    React Native跨平台布局视频教程,React Natiev的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本次分享集中讲解 Flexbox 的原理,以及 Platform、Dimensions API的用法。并结合具体例子,介绍如何具体实现跨平台响应式的布局,后再介绍一些布局相关的开源项目。

    2813 人正在学习 去看看 CSDN讲师

(本文只列出与Android Native的交互,iOS使用相同的Api,处理方式类似)。主要就是 MethodChannel的使用,因为native端和flutter端都有 methodChannel的setMethodCallHandler(),和invokeMethod()方法,所以两端都可以使用methodChannel进行通信。

Dart调用Native源码:
//Dart端源码

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('samples.flutter.dev/battery');

  // Get battery level.
}



// Get battery level.
  String _batteryLevel = 'Unknown battery level.';

  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

//Native端,Android Java.(Kotlin类似)。交互代码运行在mainThread主线程。

import io.flutter.app.FlutterActivity;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "samples.flutter.dev/battery";

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                new MethodCallHandler() {

                    @Override
                    public void onMethodCall(MethodCall call, Result result) {
                        // Note: this method is invoked on the main thread.
                        if (call.method.equals("getBatteryLevel")) {
                            int batteryLevel = getBatteryLevel();

                            if (batteryLevel != -1) {
                                result.success(batteryLevel);
                            } else {
                                result.error("UNAVAILABLE", "Battery level not available.", null);
                            }
                        } else {
                            result.notImplemented();
                        }
                    }
                });
    }
}

 

Native发送给flutter数据:(同样使用methodChannel机制)
//native 端。这里是Kotlin,Java类似。

const val CONNECTION_CHANNEL = "com.demo.flutter.connection"

val methodChannel = MethodChannel(flutterView, CONNECTION_CHANNEL)
        methodChannel.setMethodCallHandler { methodCall, result ->
            when (methodCall.method) {
                "activityFinish" -> {
                    goBack() //关闭当前页面
                    result.success(null) //标识调用成功
                }
                "showToastMessage" -> showShortToast(methodCall.argument<String>("message"))
            }
        }


//使用注册的方法channel调用dart端方法名称,并传递参数。
        Handler().postDelayed({
            methodChannel.invokeMethod("aaa", "c")
        }, 5000);

//dart端

static const _platform = const MethodChannel("com.whitehorse.flutter.connection");

  _AboutPageState() {
    _platform.setMethodCallHandler((handler) {
      switch (handler.method) {
        case "aaa":
          _platform.invokeMethod("showToastMessage", {"message": "您调用了dart里的方法"});
          break;
      }
    });
  }

  void _goBack() {
//    _platform.invokeMethod("activityFinish");
  }

 

另一种方式,实现native flutter通信:

基于 EventChannel,使用事件流 event stream 驱动,更适合长久耗时的方法调用。

//Native端,android.

public class MainActivity extends FlutterActivity {
    public static final String STREAM = "com.yourcompany.eventchannelsample/stream"; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        new EventChannel(getFlutterView(), STREAM).setStreamHandler(
                new EventChannel.StreamHandler() {
                    @Override
                    public void onListen(Object args, final EventChannel.EventSink events) {
                        Log.w(TAG, "adding listener");
                    }

                    @Override
                    public void onCancel(Object args) {
                        Log.w(TAG, "cancelling listener");
                    }
                }
        );
    }
}

//flutter,dart端

static const stream =
    const EventChannel('com.yourcompany.eventchannelsample/stream');

StreamSubscription _timerSubscription = null;

void _enableTimer() {
  if (_timerSubscription == null) {
    _timerSubscription = stream.receiveBroadcastStream().listen(_updateTimer); // 添加监听
  }
}

void _disableTimer() {
  if (_timerSubscription != null) {
    _timerSubscription.cancel();
    _timerSubscription = null;
  }
}

* flutter receiveBroadcastStream([arguments]) 返回一个 broadcast stream对象。使用API进行操作。
https://api.flutter.dev/flutter/dart-async/Stream-class.html
常用的为 listener。

没有更多推荐了,返回首页