2016-12-05 20:01:03 xiongqiangwin1314 阅读数 600
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40571 人正在学习 去看看 易荟云

手势的上下左右判断的方法

moveActionEnd: function (movePos) {
    this.console("movePos" + JSON.stringify(movePos));
    let [sX, sY, eX, eY] = movePos;//开始X坐标 开始Y坐标 结束X坐标 结束Y坐标
    let x = eX - sX, y = eY - sY, direction;
    let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    if ((eX == 0 && eY == 0) || z < 20) {//移动距离小于20像素视为点击
        direction = -1;
    } else {
        direction = Math.round(( ( ( Math.atan2(y, x) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3) % 4;
    }
    this.console("角度:" + direction);// 点击(-1) 上(0) 右(1) 下(2) 左(3)
    switch (direction) {
        case -1:
            this.keyPressIn(6);
            break;
        case 0:
            this.keyPressIn(2);
            break;
        case 1:
            this.keyPressIn(5);
            break;
        case 2:
            this.keyPressIn(3);
            break;
        case 3:
            this.keyPressIn(4);
            break;
        default :
            break;
    }
}
该示例代码为触摸遥控器解决方案的一部分代码,完整示例代码将会在react native触摸遥控器解决方案提供。

2016-12-13 00:27:19 u013531824 阅读数 1107
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40571 人正在学习 去看看 易荟云

网上的好多文章关于Native Modules模块的大多数都是使用Toast作为例子,但是这么写有两个问题:

  • Toast的makeText方法为static类型的静态方法,并不需要实例化一个Toast对象就可以使用,那么问题来了,如果调用类的非静态方法,该如何实现Native Modules
  • Toast的show方法,确实给展示了本地方法的封装,但是如果方法有返回值,应该如何将返回值传递给JS

好的,分享这篇文章的目的,就是要解决这两个问题。


封装类的非静态方法

解决这个问题,首先我们需要的就是类的实例化,那么实例化的对象从何而来,两种方式:

第一

public class NativeModule extends ReactContextBaseJavaModule {
    private NativeA nativeA;
    public NativeModule(ReactApplicationContext reactContext) 
    {
        super(reactContext);
        nativeA = new NativeA();
    }
}

ReactContextBaseJavaModule就不用多介绍了,封装本地Module必须要继承的类。这要是在NativeModule的构造函数中实例化一个对象。方便后面对方法的封装时使用。
第二种方式

public class NativeModule extends ReactContextBaseJavaModule {
    private NativeA nativeA;
    public NativeModule(ReactApplicationContext reactContext, NativeAd nativeA) {
        super(reactContext);
        this.nativeA = nativeA;
    }

创建两个参数的NativeA类的构造函数,通常会使用这种方式进行本地类的封装,因为我们会在使用NativeA的方法,将创建好的对象传递过来,这样在JS端就可以实时获取到不同的NativeA的属性值。


有返回值得方法封装

直接上代码,聪明的你一看就明白。

 @ReactMethod
    public void getTitle(Callback successCallBack) {
        String title = nativeA.getTitle();
        successCallBack.invoke(title);
    }

其中getTitle是原生来NativeA的方法,通过Callback类将值传递回JS端,但是记住这个过程是异步的,会有延迟。Callback的路径是com.facebook.react.bridge.Callback

分享完毕,谢谢。

2019-06-08 18:11:56 qq_31915745 阅读数 577
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40571 人正在学习 去看看 易荟云

背景:还是那个可爱的产品经理,需要我在app的tab页面和tab二级页面做不同处理,那么问题来了,在主程序中,构建底部tab,我们用的是createBottomTabNavigator这个方法,也就是说,不能用this.props.navigation这个方法去判断当前是在tab主页面还是二级页。好吧,那就看看怎么解决这个问题。

解决方法:

RN的官方文档里给出了解答。直接贴代码

import { createAppContainer, createStackNavigator } from 'react-navigation';
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);

// gets the current screen from navigation state
function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route.routeName;
}

const AppNavigator = createStackNavigator(AppRouteConfigs);
const AppContainer = createAppContainer(AppNavigator);

export default () => (
  <AppContainer
    onNavigationStateChange={(prevState, currentState, action) => {
      const currentScreen = getActiveRouteName(currentState);
      const prevScreen = getActiveRouteName(prevState);

      if (prevScreen !== currentScreen) {
        // the line below uses the Google Analytics tracker
        // change the tracker here to use other Mobile analytics SDK.
        tracker.trackScreenView(currentScreen);
      }
    }}
  />
);

由上可以看到,在router根路径上加上onNavigationStateChange的方法,可以知道当前和上一个路径的routeName,完美解决了需求。tracker不需要可以直接删掉。 文档地址:https://reactnavigation.org/docs/en/screen-tracking.html

ok,到这里,完结撒花~今天是端午节,也祝大家端午安康!

2016-12-15 13:32:08 oMrLeft123 阅读数 3522
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40571 人正在学习 去看看 易荟云

比较直接的几个方式如下:

  • 手机设置———>开发者选项———–>开启显示布局边界,页面有布局的是native否则为h5页面;
  • 长按页面,如果出现文字选择、粘贴功能的是H5页面,否则是native页面,我在我们自己的App里面试了一下是可以判断的。但是有一种情况,如果H5页面就是一张图片,那么是不能通过这个方法验证的。
  • 抓包抓到url或者html的代码则肯定有 「H5」布局。

还有一些情况需要从native和h5的区别去判断了,区别如下:

  • app和h5页面相比,拥有较少的页面跳转。网络环境一致的情况下,h5页面渲染是需要调取服务器的,但是app的渲染在本地,所以h5页面跳转更费力,不稳定感会强一些。所以h5页面想要减少跳转的话,一般都会使用交互技巧来隐藏文字。
  • h5页面展示空间比app小,给使用者带来的记忆负担大于app。人的大脑能短期记忆,但是这样的记忆是不稳定的。如果用户在滚动翻阅屏幕的过程中,需要临时记忆的信息越多,他们的表现是会越差的。现在,只有很少的人会有耐心慢慢看完长长的内容,h5页面相对于app而言,多了浏览器导航所占用的屏幕空间。
  • h5与app相比的优势在于h5页面可以随意的分享,而且迭代是很方便的,不同的系统只要适配一次即可。但是app的每次迭代需要在不同系统基础上迭代。
  • h5页面与app导航设计不同。h5页面使原有底部导航消失,有效的导航遇到挑战。在设计要考虑导航设计,顶部底部或左右侧,还要考虑如何快速跳转回重要页面,导航快捷键:如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮。而app的导航更直接方便。
2016-12-08 17:51:14 wei1583812 阅读数 8350
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40571 人正在学习 去看看 易荟云

首先得先简单学习下什么是schema :

什么是 URL Schema? 
    android中的scheme是一种页面内跳转协议,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面;通过scheme协议,服务器可以定制化告诉App跳转哪个页面,可以通过通知栏消息定制化跳转页面,可以通过H5页面跳转页面等。

URL Schema应用场景: 
    客户端的某个页面可以先注册一个 URL scheme,通过指定的 URL 字段,可以让应用在被调起后直接打开某些特定页面,比如商品详情页、活动详情页等等。也可以执行某些指定动作,如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。

先简单描述一下Android 中最简单的实现 HTML调用native原生页面的流程:

1、先让Activity注册实现schema
2、Activity实现可以接收schema传过来的参数的方法
3、浏览器在shouldOverrideUrlLoading()方法中实现拦截URL判断

先看第一步的实现:
1、先让Activity注册实现schema
比如你要打开的Activity的链接是mls://userpage ,那么在Manifest 里面这么注册activity:

        <activity
            android:name=".userpage.UserPageActivity"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />

                <data android:scheme="mls" />
                <data android:host="userpage" />
            </intent-filter>
        </activity>
其中schema表示这个链接的前缀,host代表短链的名字。如果你要在你的schema里面传参数,比如你要传uid和user_type,那么就跟普通的url的get参数格式一样:mls://userpage?uid=123&user_type=mogujie 。注意,中间千万不能有空格。那Activity怎么接收参数呢,往下看。

2、Activity实现可以接收schema传过来的参数的方法

    String uid,userType;
    private void parseUriParams() {
        Uri uri = getIntent().getData();
        if (uri != null) {
            uid = uri.getQueryParameter("uid");
            userType = uri.getQueryParameter("user_type");
        }
    }
3、浏览器在shouldOverrideUrlLoading()方法中实现拦截URL判断
public class MainActivity extends BaseActivity {
    private WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.webview);

        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.getSettings().setSupportZoom(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setSupportMultipleWindows(true);
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new MyWebChromeClient());

        mWebView.loadUrl("你的网址链接");

    }

    public class MyWebChromeClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.startsWith("mls://")) {
                Intent intent = new Intent();
                intent.setData(Uri.parse(url));
                startActivity(intent);
                Log.v("tag_2", url);
                return true;
            }
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

}

解释一下shouldOverrideUrlLoading()方法,这个是当webView加载网页时,可以在这个方法里面处理。你可以让你的前端小伙伴在这里写点击打开链接的网址为:mls://userpage?uid=123&user_type=mogujie ,那么就可以打开你的本地native 页面啦。

那怎么实现Android 客户端再回调通知H5网页呢?比如H5调用原生登录页面,登录完成后要告诉H5登录了。最简单的方法就是登录完成后刷新当前H5,用get参数传递过去uid之类的用户信息。哈哈。

===============================

如果你觉得帮到了你,请给作者打赏一口饭吃:


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