android - react native 资源问题

Question

我是一名 Android 应用程序开发人员，从上个月开始从事 React-Native 方面的工作。我有问题，对于那些我无法找到解决方案的问题:

1. react-native 是否使用 sp 而不是 dp 来设置字体大小，如果我们想使用 dp 来设置字体大小怎么办。

2. 我想为布局提供 hdpi、xhdpi 和 xxhdpi 维度，该怎么做？

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

Answer 1

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

1) react-native 是否使用 sp 而不是 dp 来设置字体大小，如果我们想使用 dp 来设置字体大小怎么办。

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

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

没有特定的文件夹可以直接支持 dimens。在这种情况下，您应该使用 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()，请检查以下链接以供引用: 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);
    });
  }