android – 反应原生资源问题

前端之家收集整理的这篇文章主要介绍了android – 反应原生资源问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是一名 Android应用程序开发人员,并在过去一个月开始研究React-Native.我有疑问,因为那些我无法找到解决方案:

>对于font-size,反应是本机使用sp而不是dp,如果我们想将dp用于font-size,该怎么办?
>我想为布局提供hdpi,xhdpi和xxhdpi维度,怎么做?
>如何为7英寸平板电脑,10英寸平板电脑和手机提供单独的尺寸?出于某种目的,我想为react-native实现isDeviceTablet()方法,该怎么做?

解决方法

请在下面找到您的问题的答案:

1)对于font-size,react-native是否使用sp而不是dp,如果我们想使用dp作为font-size,该怎么办?

是的反应本机使用sp为font-size,所以android也是如此,所以你不需要将它改为dp. https://developer.android.com/reference/android/widget/TextView.html#attr_android:textSize

2)我想为布局提供hdpi,怎么做?

没有特定的文件夹可以直接支持尺寸.在这种情况下,您应该使用PixelRatio的概念. https://facebook.github.io/react-native/docs/pixelratio.html

要提供自适应字体大小,您可以查看以下链接以供参考:React Native Responsive Font Size

3)如何为7英寸平板电脑,该怎么做?

创建一个方法来检查android代码中的isDeviceTablet()方法,然后在你的js文件调用方法.

要检查isDeviceTablet(),请查看以下链接以供参考:
Determine if the device is a smartphone or tablet?

要在您的js文件调用android方法,请按照以下步骤操作:

创建一个UtilityControllerModule类:

public class UtilityController implements ReactPackage {
    public UtilityController(Activity activity) {

    }

    public UtilityController() {

    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new UtilityControllerModule(reactContext));
    }

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

创建一个模块类:

public class UtilityControllerModule extends ReactContextBaseJavaModule {
    ReactApplicationContext reactContext;

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

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


    @ReactMethod
    public void isTablet(Callback callback) {
        boolean tabletSize = reactContext.getResources().getBoolean(R.bool.isTablet);
        Log.e("isTablet >>","" + tabletSize);
        callback.invoke(tabletSize);
    }
}

现在在你要调用方法的js文件中:

import { NativeModules } from 'react-native';

var UtilityController = NativeModules.UtilityController

现在调用isTablet(),

componentDidMount(){
    UtilityController.isTablet((isTabletCallback)=>{
      console.log("isTabletJs>>",isTabletCallback);
    });
  }

猜你在找的Android相关文章