如何在 React Native Project 中的图像之间留出空间？答案

【问题标题】：How to make a space between images in React Native Project?如何在 React Native Project 中的图像之间留出空间？
【发布时间】：2019-01-14 19:03:46
【问题描述】：

现在我正在使用 React Native 和 Expo 创建一个移动应用程序。

我在 ScrollView 中设置了 ScrollView 和 View、Image、Text。我想在每张图片之间留出一些空间，但我做不到。

当然，我尝试在 styleSheet 中使用 Padding 和 Margin，但这些都不起作用。

这是我的代码。

  renderShopList() {
    return shopLists.map((value, index) => {
     return (
      <View
       key={index}
       style={styles.shopListBox}
      >
       <Image
        source={value.image}
        style={styles.shopListImage}
      />
       <View style={styles.shopListTextBox}>
        <Text style={styles.shopListText}>
          {value.genre}
        </Text>
      </View>
    </View>
   );
 });
}

这是我下面的样式表。

const styles = StyleSheet.create({
 container: {
  flex: 0.2,
 },
 shopListBox: {
  width: 140,
  height: 105,
  marginTop: '8%',
 },
 shopListImage: {
  width: 140,
  height: 105,
  marginLeft: '12%',
  borderRadius: 4,
 },
 shopListTextBox: {
  position: 'absolute',
  top: '26%',
  left: '12%',
  width: 140,
  paddingTop: '2%',
  paddingBottom: '2%',
  backgroundColor: 'rgba(111,111,111,0.8)',
 },
 shopListText: {
  fontSize: 25,
  fontWeight: '900',
  color: '#fff',
  paddingLeft: '28%',
 },
 });

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

按百分比进行边距对 scrollView 内的直接子级不起作用，因为它会增长，如果您尝试为多个屏幕尺寸进行相对尺寸调整，请执行以下操作 react-native-size-matters

【讨论】：