如何从 React Native 上的图像之间删除边距？答案

【问题标题】：How to remove margin from between images on React Native?如何从 React Native 上的图像之间删除边距？
【发布时间】：2020-05-26 20:37:54
【问题描述】：

我是 React Native 的新手，我正在尝试构建一个简单的应用程序，该应用程序在屏幕上显示四个具有可触摸功能的图像，但是图片之间存在边距，并且设置 margin:0 和 padding:0 根本没有帮助。

有什么解决办法？

render() {
    return (
      <View>
      <SafeAreaView>

          {listItems.map(
            (item) => (
              console.log(item.pic),
              (
                <View>
                  <TouchableOpacity onPress={this.onClickPic}>
                  <ImageBackground
                    style={styleImage.container}
                    source={item.pic}
                  >
                    <Text>{item.title}</Text>
                  </ImageBackground>
                  </TouchableOpacity>
                </View>
              )
            )
          )}

      </SafeAreaView>
      </View>
    );
  }
}


const styleImage = StyleSheet.create({
  container: {
    height: "30%",
    width: "30%",
    padding:0,
    margin:0,
  },
});

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

试试这个... 用图像替换 ImageBackground 并为其添加一个属性resizeMode ='cover'，它将图像拉到图像区域的末端

          {listItems.map(
            (item) => (
              console.log(item.pic),
              (
                <View>
                 <TouchableOpacity onPress={this.onClickPic}>
                  <View>
                   <Image
                    resizeMode="cover" // or 'stretch'
                    style={{ height: 200, width: 200 }}
                    source={item.pic}
                    />

                   <View style={{ position: "absolute", zIndex: 9 }}>
                    <Text>{item.title}</Text>
                   </View>
                  </View>
                 </TouchableOpacity>
                </View>
              )
            )
          )}
      </SafeAreaView>
      </View>
    );

根据您的要求设计风格

【讨论】：