reactnative图片排列

在 React Native 中，可以使用 `flexbox` 来排列图片。以下是一个简单的例子，展示了如何将三张图片水平排列：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const images = [
  require('./image1.png'),
  require('./image2.png'),
  require('./image3.png'),
];

const ImageRow = () => {
  return (
    <View style={styles.container}>
      {images.map((image, index) => (
        <Image key={index} source={image} style={styles.image} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 200,
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default ImageRow;

在上面的例子中，我们创建了一个 `ImageRow` 组件，其中包含了三张图片，这三张图片被水平排列并居中显示。

首先，我们使用 `require` 导入了三张图片。接下来，我们在 `ImageRow` 组件中使用了 `View` 来创建一个容器，并将该容器的 `flexDirection` 属性设置为 `'row'`，这意味着其中的子元素将水平排列。我们还使用了 `justifyContent` 和 `alignItems` 属性来对齐子元素。在这个例子中，我们使用了 `'space-around'` 来使子元素在容器中均匀分布，并在它们之间留有空白。最后，我们设置了每个图片的宽度和高度。

这是一个简单的例子，你可以根据自己的需要进行修改和扩展。