css 在React Native Web中,在调整窗口大小时动态缩放样式的最佳方式是什么?

mbjcgjjk  于 2022-11-19  发布在  React
关注(0)|答案(3)|浏览(123)

我正在尝试创建一个响应式的React Native Web应用程序,它也支持iOS和Android。
我发现似乎没有办法根据不断变化的窗口大小动态调整大小。
我想有一些卡调整大小后,窗口大小。
以下是我的风格:

MainStyles = StyleSheet.create(
    {
        card: {
            alignItems: 'center',
            justifyContent: 'space-between',
            alignSelf: "flex-end",
            marginBottom: scale(10),
            marginLeft: scale(10),
            marginRight: scale(10),
            shadowColor: colorBlack,
            shadowOffset: {
                width: 4,
                height: 4,
            },
            shadowOpacity: 0.53,
            shadowRadius: scale(3.62),
            elevation: 4,
            alignSelf: "flex-end", 
        }
    }

但是,如果我试着加上这样的话:

const window = Dimensions.get("window");

const width_proportion = (window.width * .20);
const height_proportion = (window.height * .20);

它只是在样式表中设置一个静态值,该值不会更新。
我必须在我的组件内部执行此操作,这感觉有点过于耦合:

class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cardSize: (Dimensions.get("window").width * .2)
        }
    }

componentDidMount() {
    if(window.addEventListener) {
        window.addEventListener('resize', this.resize)
        }
}

resize = () => {
    // Going for a square size, hence using width for both height/width.
    const window = Dimensions.get("window");
    this.setState({cardSize: (window.width * .2)})
     this.forceUpdate()
   }

render() {
return(
<View style={[MainStyles.card, { width: this.state.cardSize, height: this.state.cardSize}]}>
...
</View>
     );
   }
}

有没有一种更干净的方法可以让我将动态样式添加到React Native Web中,而无需直接在组件中生成样式?我所需要的只是在窗口动态调整大小时更新样式。

ni65a41a

ni65a41a1#

它总是好有我们自己的代码库,但如果你寻找简单的解决方案,那么你可以尝试这个插件

https://www.npmjs.com/package/react-native-responsive-screen

他们提供了一些很酷的功能,或者也有多个插件可用。
快乐编码!!!

jmp7cifd

jmp7cifd2#

我认为最好只使用flex:使用弹性方块文件https://reactnative.dev/docs/flexbox的版面配置
这样您就可以创建一个有填充的视图。它会自动调整大小。

<View style={{flex: 1, padding: 15}} />
j5fpnvbx

j5fpnvbx3#

这是一种不同的方法,允许您对不同的窗口宽度/高度比率使用不同的布局:
https://github.com/MehmetKaplan/react-native-animated-layout

相关问题