反应原生资源问题

Question

我是一名Android应用程序开发人员,并在过去一个月开始研究React-Native.我有疑问,对于那些我无法找到解决方案的人:

1. 做反应本机使用sp而不是dpfont-size,如果我们想使用dp的font-size怎么办？

2. 我想提供hdpi,xhdpi并xxhdpi梦诗的布局,如何做到这一点？

3. 如何为7英寸平板电脑,10英寸平板电脑和手机提供单独的尺寸？出于某种目的,我想为react-native实现isDeviceTablet()方法,该怎么做？

Answer 1

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

1）react-native是否使用sp而不是dp作为字体大小，如果我们想使用dp作为字体大小怎么办？

是的，react-native使用sp作为字体大小，android也是如此，所以你不需要将其更改为dp。https://developer.android.com/reference/android/widget/TextView.html#attr_android:textSize

2) 我想为布局提供 hdpi、xhdpi 和 xxhdpi 尺寸，该怎么做？

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

要提供响应式字体大小，您可以查看以下链接以供参考：React Native Responsive Font Size

3) 如何为7寸平板、10寸平板和手机提供单独的尺寸？出于某种目的，我想为react-native实现 isDeviceTablet() 方法，该怎么做？

在 Android 代码中创建一个用于检查 isDeviceTablet() 方法的方法，然后在 js 文件中调用该方法。

要检查 isDeviceTablet()，请查看以下链接以供参考： 确定设备是智能手机还是平板电脑？

要在 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);
    });
  }