React Native，如何在flexGrow中灵活调整图片大小？

Question

我有几个视图，在这些视图之后，我想将屏幕上的剩余空间用于灵活的预览库。 但是，截至目前，我只能使图片采用自然图片大小，不会调整到其 flexbox 边界。 这是外部 App.tsx：

return (
    <View style={[styles.wrapper, { backgroundColor: 'blue' }]}>
        // lots of components
        <View style={[styles.previewContainer, { backgroundColor: 'yellow' }]}>
            <Preview/>
        </View>
    </View>
)

这里关联的样式将剩余空间分配给 previewContainer：

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: COLORS.backgroundLight,
        flex: 1,
    },
// other irrelevant styles...
    previewContainer: {
        flexGrow: 1,
        marginTop: 8,
        marginHorizontal: 12,
        margin: 8,
    },

});

这是 Preview 组件，它基本上只是忽略了在 App.tsx 中设置的容器边界。 预览.tsx：

// example assets to exclude prop passing as an error source
const assets = [
    require('../images/ex1.png'),
    require('../images/ex2.png'),
    require('../images/ex3.png'),
    require('../images/ex4.png'),
]

export const Preview = (images: any) => {

    const [pictures, setPictures] = useState(assets)
    return (
        <View style={styles.previewRow}>
            <View style={styles.previewCell}>
                <Image
                    // do I need a style here?
                    source={assets[0]}
                    resizeMode='cover'
                />
            </View>

        </View>
    )


}
const styles = StyleSheet.create({
    previewRow: {
        flexDirection: 'row',
    },
    previewCell: {
        //what am I supposed to do here?
    }

})

稍后，我希望在类似网格的画廊中显示最多 4 张图片。 但是，就目前而言，重要的是使用分配的剩余空间并相应地缩放图片。

Answer 1

指定图像的尺寸。 为 2x2 网格执行此操作的一种方法：

<View style={{ flex: 1} }>
  <Text>Hello World!</Text>
  <View style={{ backgroundColor: "red", height: 30 }} />
  <View style={{ backgroundColor: "green", height: 100 }} />
  <View style={{ backgroundColor: "blue", height: 20 }} />
  <View style={{ flexDirection: "row", flexWrap: "wrap", flexGrow: 1 }}>
    <Image
      style={{width: "50%"}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
    <Image
      style={{width: "50%"}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
    <Image
      style={{width: "50%"}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
    <Image
      style={{width: "50%"}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
  </View>
</View>