对本地资源问题做出反应

Question

我是一名Android应用程序开发人员，从上一个月开始研究 React 原生。我有问题，对于那些我无法找到解决方案的人：

>

确实反应原生使用sp而不是dp来表示字体大小，并且如果我们想使用dp来表示字体大小怎么办。

我想为布局提供hdpi、xhdpi和 维度，如何做到这一点？

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

Answer 1

我觉得这个可以帮到你。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}/>

Answer 2

我已经找到了你的问题的第三和第二个答案。要知道你必须使用什么尺寸以及如何使用，请阅读以下内容：https://facebook.github.io/react-native/docs/pixelratio.html 并且要知道例如设备是否是平板电脑，你可以使用这个库：https://www.npmjs.com/package/react-native-device-detection 我希望它对你有用!!!:D

Answer 3

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

1)react-native对字体大小使用sp而不是dp吗，如果我们想对字体大小使用dp呢？

是的react-原生使用sp作为字体大小，android也是如此，所以你不需要将其更改为dp。https://developer . Android . com/reference/Android/widget/text view . html # attr _ Android:text size

2） 我想为布局提供hdpi、xhdpi和xxhdpi维度，如何做到这一点？

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

如需提供响应式字体大小，您可以查看以下链接以供参考：React Native响应式字体大小

3）如何为7英寸平板电脑，10英寸平板电脑和手机提供单独的尺寸？出于某种目的，我想实现是针对反应原生的即设备Tablet（）方法，如何做到这一点？

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