反应本机资源问题

Question

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

react-native 是否使用 sp 而不是 dp 作为字体大小，如果我们想使用 dp 作为字体大小怎么办。
我想为布局提供 hdpi、xhdpi 和 xxhdpi 维度，该怎么做？
如何为7英寸平板电脑、10英寸平板电脑和phone提供单独的尺寸？出于某种目的，我想为 react-native 实现 isDeviceTablet() 方法，该怎么做？

Answer 1

我找到了您问题的第 3 和第 2 个答案。要了解您必须使用哪些尺寸以及如何使用，请阅读：https://facebook.github.io/react-native/docs/pixelratio.html 为了知道设备是否是平板电脑，您可以使用此库：https://www.npmjs.com/package/react-native-device-detection 我希望这个对你有用！！！ :D

Answer 2

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

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 尺寸，怎么办？

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

为了提供响应式字体大小，您可以查看下面link以供参考：React Native Responsive Font Size

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

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

检查isDeviceTablet()，请检查下面link以供参考： Determine if the device is a smartphone or tablet?

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

创建 UtilityControllerModule class:

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();
    }
}

创建模块class:

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

Answer 3

我认为这个可以帮助你。 https://www.npmjs.com/package/react-native-responsive-dimensions

<Text style = {{fontSize: responsiveFontSize(2), color: PRIMARY_COLOR}}>Abonnement</Text>

2：正常尺寸

图像比例

<Image style = {{width: responsiveWidth(100), height: responsiveHeight(100)}} source={CONNECTION_BACKGROUND}/>

反应本机资源问题

React native resources issues

android

react-native

android-screen-support