反应原生

Question

我正在开发RN应用程序，我对屏幕的旋转和尺寸有疑问。我有一个画廊应用程序，如果屏幕是垂直的，我连续显示三个图像。我通过将宽度除以图像的大小来调整它，我认为这种指定行中图像数量的方式使得它对于不同的设备是一致的和可变的。然而，在我旋转屏幕后，我期待连续看到更多图像，但我没有。我意识到宽度没有变化，所以我再次看到三张图片而不是5或6.我不确定我这样做的方式是对还是错。对此有何建议？另外，如何改变音高的宽度和高度，以便我可以在旋转后更改画廊的对齐方式？ 这是我的代码的一部分

...var {height, width} = Dimensions.get('window');
var imageSize = 120;
// number : number of images in a row
var number = Math.round(width/imageSize);
console.log(number);
var CameraRollView = React.createClass({

propTypes: propTypes,

getDefaultProps: function(): Object {
    return {
        groupTypes: 'SavedPhotos',
        batchSize: 5,
        imagesPerRow: number,
        assetType: 'Photos',
        renderImage: function(asset) {
            //var imageSize = 120;
            var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
            return (
                <TouchableHighlight onPress={
                    ()=>{
                        /**fire gallery action selectImage*/
                        this.selectImage(asset.node.image.uri, this.images);
                    }
                }  key={asset.node.image.uri}>
                    <Image
                        source={asset.node.image}
                        style={imageStyle}
                    />
                </TouchableHighlight>
            );
        },
    };
},
...

这里重要的是-imagesPerRow-我希望它是动态的，因为我旋转设备。

Answer 1

如果您需要响应屏幕尺寸更改，我建议不要使用Dimensions模块。

View组件提供onLayout属性，每次必须重新计算视图的布局时（例如，在设备旋转时）都会调用该属性。我对应用程序的体系结构一无所知，所以我只想说在我看来最简单的方法就是将它设置为应用程序中根目录View上的一个函数。状态的新参数（如果使用，则为您的flux / redux商店）。

然后，您可以通过您的应用传递该信息，并根据需要使用它。