Question

我是一名Android应用开发者，并在过去一个月开始研究React-Native。我有疑问，因为那些我无法找到解决方案：

对font-size做反应原生使用sp而不是dp，如果我们想将dp用于font-size，那该怎么办。
我想为布局提供hdpi，xhdpi和xxhdpi尺寸，如何做？
如何为7英寸平板电脑，10英寸平板电脑和手机提供单独的尺寸？出于某种目的，我想为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）对于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，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（），请查看以下链接以供参考： 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);
    });
  }

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}/>

反应原生资源问题

3 个答案: