我正在尝试创建一个响应式的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中,而无需直接在组件中生成样式?我所需要的只是在窗口动态调整大小时更新样式。
3条答案
按热度按时间ni65a41a1#
它总是好有我们自己的代码库,但如果你寻找简单的解决方案,那么你可以尝试这个插件
他们提供了一些很酷的功能,或者也有多个插件可用。
快乐编码!!!
jmp7cifd2#
我认为最好只使用flex:使用弹性方块文件https://reactnative.dev/docs/flexbox的版面配置
这样您就可以创建一个有填充的视图。它会自动调整大小。
j5fpnvbx3#
这是一种不同的方法,允许您对不同的窗口宽度/高度比率使用不同的布局:
https://github.com/MehmetKaplan/react-native-animated-layout