2018-11-06 14:02:17 zhouhouyun 阅读数 692
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

react-native 调用原生android的方法大家都知道,使用桥文件就可以搞定;
android调用react-nativ我使用的是事件的方式

1、react-native 注册事件

const {EventEmitterManager} = NativeModules;
const tempEventEmitterManager = new NativeEventEmitter(EventEmitterManager);

this.remoteNoti = tempEventEmitterManager.addListener(
            'RemoteNoti',
            (e)=>this.androidComeFrom(e));

2、android端发送事件 使用 WritableMap传递参数

	
	 //定义发送事件的函数
  public static void sendEvent(ReactContext reactContext, String eventName, WritableMap params)
  {
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
  }
2017-10-21 23:20:20 kangguang 阅读数 209
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

React Native 应用根组件的注册和调用 ,原理如下图:



AppRegistry.registerComponent 接口将React Native 平台的根组件 RNTransplant 注册到了原生平台上。当React Native启动时,原生平台会调用该组件,iOS工程中调用 React Native 组件的AppDelegate.m 代码为:



2019-12-15 11:19:34 weixin_44976833 阅读数 35
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

React事件处理

1.事件绑定

1.React事件绑定语法与DOM事件语法相似;

2.语法:on+事件名称=事件处理函数,比如onClick = function(){};

3.React事件使用驼峰命名法;

4.类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数的时候需要用到this,代表指向当前的类的引用,在函数中不需要调用this

class App extends React.Component{
    // 事件处理函数
    handleClick() {
        console.log('点我就好了')
    }
    render() {
        return (
            <button onClick={this.handleClick}>点我了吗</button>
        )
    }
}

2.事件对象

1.可以通过事件处理函数的参数获取到事件对象;

2.React中的时间对象叫:合成事件;

3.合成事件:兼容所有浏览器,无需担心夸浏览器兼容问题;

4.除了兼容所有浏览器外,还拥有和浏览器原生事件相同的接口,包括stopPropagation()和 preventDefault()

5.若想获取到原生事件对象,可以通过nativeEvent属性获取

class App extends React.Component{
    // 事件对象
    handleClick(e){
        // 阻止默认行为
        e.preventDefault()
        console.log('a标签的单机事件触发了')
    }
    render() {
        return (
            <a href="http://www.baidu.com" onClick={this.handleClick}> baidu</a>
        ) 
    }
}

获取原生事件对象

class App extends React.Component{
    // 事件处理函数
    handleClick(e) {
        console.log(e.nativeEvent)
    }
    render() {
        return (
            <button onClick={this.handleClick}>点我了吗</button>
        )
    }
}

3.支持的事件

  • Clipboard Events 剪切板事件

    • 事件名 :onCopy onCut onPaste
    • 属性 :DOMDataTransfer clipboardData
  • compositionEvent 复合事件

    • 事件名: onCompositionEnd onCompositionStart onCompositionUpdate
    • 属性: string data
  • Keyboard Events 键盘事件

    • 事件名:onKeyDown onKeyPress onKeyUp
    • 属性: 例如 number keyCode 太多就不一一列举
  • Focus Events 焦点事件 (这些焦点事件在 React DOM 上的所有元素都有效,不只是表单元素)

    • 事件名: onFocus onBlur
    • 属性: DOMEventTarget relatedTarget
  • Form Events 表单事件

    • 事件名: onChange onInput onInvalid onSubmit
  • Mouse Events 鼠标事件

    • 事件名:

      onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
      onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
      onMouseMove onMouseOut onMouseOver onMouseUp
      
  • Pointer Events 指针事件

    • 事件名:

      onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
      onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
      
  • Selection Events 选择事件

    • 事件名:onSelect
  • Touch Events 触摸事件

    • 事件名:onTouchCancel onTouchEnd onTouchMove onTouchStart
  • UI Events UI 事件

    • 事件名: onScroll
  • Wheel Events 滚轮事件

    • 事件名:onWheel

    • 属性:

      number deltaMode
      number deltaX
      number deltaY
      number deltaZ
      
  • Media Events 媒体事件

    • 事件名:

      onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
      onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
      onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
      onTimeUpdate onVolumeChange onWaiting
      
  • Image Events 图像事件

    • 事件名:onLoad onError
  • Animation Events 动画事件

    • 事件名:onAnimationStart onAnimationEnd onAnimationIteration
  • Transition Events 过渡事件

    • 事件名:onTransitionEnd
  • Other Events 其他事件

    • 事件名: onToggle
2018-09-18 17:31:34 ZHOUYONGXYZ 阅读数 1627
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

    最近公司项目需要结合Android 加载H5 页面加快工作效率。前端页面采用目前比较流行的React编写,由于React 的特殊性,我们在Android 很难使用常规的

mWebView.evaluateJavascript("xxx()") 方式来找到React 的对象方法来调用。研究了一下React 的编译机制,如果webpack 打包的js生成bundle.js 这个js 中是一个很长的立即执行函数,这就导致我们根本无法去调用,之前写好的类和方法。

解决方法:

   将ES6 编写的React 类的实例暴露给window 就可以了。

mport React from 'react';
import {Tabs, Badge,ImagePicker} from "antd-mobile";
import './my.css'
import {Link} from 'react-router-dom';
import Height from '../height'
import $ from 'jquery';
import plus from '../../images/plus.png'
import VConsole from 'vconsole'

window.updateValue = function(url) {
    console.log(url);
    if(window.callback != undefined) {
        window.callback.updateValue(url);
    }
};

window.setCallback = function(callback) {
    window.callback = callback;
};

export default class MyFeedback extends React.Component {
    state = {
        files: [],
        multiple: false,
        value:"我们非常重视你的建议11"
    };

    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    };

    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    };

    onAddImageClick() {
        console.log(navigator.userAgent);
        //window.location.assign("?action=uploadimg");
        if (window.andpicker != null) {
            window.andpicker.test("hello");
        }
    }

    componentWillMount() {
        document.title = "反馈";
        var vConsole = new VConsole();
        window.setCallback(this);
    }

    updateValue(val) {
        this.setState({
            files: this.state.files.concat({
                url: val,
                id: '311',
            }),
        });
    }

    render() {
        return (
            <div style={{minHeight: 'calc(100vh - 43.5px)', backgroundColor: '#fff'}}>
                <div>
                    <div style={{padding:'8px',background:'#ccc'}}>问题和建议</div>
                    <div style={{margin:'8px'}}><input style={{height:'200px',width:'-webkit-fill-available'}} value={this.state.value} /></div>
                    <div style={{padding:'8px',background:'#ccc'}}>上传图片</div>
                    <div>
                        <ImagePicker
                            files={this.state.files}
                            onChange={this.onChange}
                            onImageClick={(index, fs) => console.log(index, fs)}
                            onAddImageClick={this.onAddImageClick}
                            selectable={this.state.files.length < 7}
                            multiple={this.state.multiple}/>
                    </div>
                    <div style={{margin:'8px',background:"#f00",color:'#fff',height:'20px',textAlign:'center',padding:'10px'}}>提交</div>
                </div>
                <Height></Height>
            </div>
        )
    }
}

window.setCallback(this); 就是重点,这样可以在Java 端调用window.updateValue();来实现和React js 的交互

Java 端代码:

package com.example.jerry.h5project;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.util.HashMap;
import java.util.Map;

public class FeedbackAct extends AppCompatActivity implements AndroidPickerJs.Callback{
    private static final String TAG = FeedbackAct.class.getSimpleName();
    private static final int CHOOSE_PICTURE = 1;

    private WebView mWebView;
    private AndroidPickerJs mJsInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_feedback);

        initViews();
    }

    private void initViews() {
        mJsInstance = new AndroidPickerJs();
        mJsInstance.setCallback(this);
        mWebView = findViewById(R.id.web_view);
        mWebView.setWebViewClient(mWebViewClient);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        webSettings.setSupportZoom(true);
        mWebView.addJavascriptInterface(mJsInstance,"andpicker");

        mWebView.loadUrl("http://10.0.0.24:3000/myfeedback");
    }

    @Override
    public void selectPic() {
        choosePictures();
    }

    private WebChromeClient mWebChromeClient = new WebChromeClient() {
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);
        }
    };

    private WebViewClient mWebViewClient = new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
           
            return super.shouldOverrideUrlLoading(view, request);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
        }

        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            Log.d(TAG,"error = " + error.toString());
            super.onReceivedError(view, request, error);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
        }

    };

    private void choosePictures() {
        Intent intent = new Intent(
                Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        startActivityForResult(intent, CHOOSE_PICTURE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == CHOOSE_PICTURE && resultCode == RESULT_OK) {
            final Uri uri = data.getData();
            Log.d(TAG,"evaluate js script ... uri = " + uri);
            Bitmap bitmap = BitmapUtils.getBitmapFromUri(this, uri);
            final String base64str = "data:image/png;base64," + Base64Utils.bitmapToBase64(bitmap);
            Log.d(TAG,"base64 = " + base64str);
            //final String base64 = "https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg";
            mWebView.post(new Runnable() {
                @Override
                public void run() {
                    mWebView.evaluateJavascript("window.updateValue('"+base64str+"')", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            //此处为 js 返回的结果
                        }
                    });
                }
            });
        }
    }
}

 

2019-05-17 14:45:54 weixin_43827462 阅读数 265
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

安卓如何调用react的方法

有些时候我们需要把前端页面嵌入到app里,此时可能有些需要前端与app协同来实现一下操作,但是要如何实现呢?我们先来说安卓app如何调用js的方法,代码如下:

componentDidMount() {
    window['方法名'] = (data) => {
     console.log(data)
    };
  }

我们只有在钩子函数中把某个方法绑定到window对象上即可,至于安卓端如何配置自行查询。
注意:想要在那个页面调用方法就在所对应的页面的钩子函数里绑定对应的方法,就相当于说是在页面加载的时候才创建了这个方法。同理安卓调用vue的方法也是。只不过在mounted中创建一个方法即可。

React 里调用axios

阅读数 8733

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