如何根据显示尺寸对ImageBackground进行平方？

Question

例如，我想对背景图像进行平方

高度：200， 宽度：200，

但是我也想根据显示尺寸来更改尺寸，例如：

width：Dimensions.get（'window'）。width / 2.5 高度：“自动”

我该怎么做？

将高度设置为“自动”不起作用。我也玩过resizeMode

这是样式道具：

#include <type_traits>
#include <tuple>

template<typename ...As>
struct outer {
    template<typename ...Bs>
    struct inner {
        using TA = std::tuple<As...>;
        using TB = std::tuple<Bs...>;

        static constexpr auto val() { 
            if constexpr (std::tuple_size_v<TA> >= std::tuple_size_v<TB>) {
                return 0;
            }
            else {
                return 1;
            }
        }
    };
};

int main() {
    return outer<int, float>::inner<double>::val();
}

Answer 1

您可以将backgroundImageStyle用作默认样式选项，但是我建议使用resizeMode“ contain”。在渲染方法中，您可以使用以下方法覆盖高度/宽度：

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width, height: Dimensions.get('window').width}]}
/>

工作示例：

https://snack.expo.io/S15hYZVAN

输出：

编辑：

如果不想使用完整尺寸，可以通过将宽度除以如下所示的比例来缩小图像：

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width/2.5, height: Dimensions.get('window').width/2.5}]}
/>