在collaut组件react-native中删除图像和视图之间的空间

Posted 2023-02-16

【中文标题】在collaut组件react-native中删除图像和视图之间的空间

【英文标题】：Remove space between image and view in collaut component react-native

【发布时间】：2022-01-22 07:57:32

【问题描述】：

我想在标记组件（react-native-maps）中渲染一些文本和图像，但是对于图像我有问题。图像和 View1 之间有一个空格，我不知道为什么。我想删除空格。

这就是我所拥有的：

image

以及我要删除的空间

image2

这是我的代码：

<Callout tooltip >
              <View style=styles.bubble >
                <View style=styles.view1 >
                   <Text style=styles.text>name</Text>
                   <Text style=styles.text>description</Text>
                </View>
                  
                    <View style=styles.view2 >
                       <Text>
                         <Image  source=require('./assets/photo/mare.jpg')
                          style=styles.image resizeMode="cover" />
                      </Text>
                    </View>
               </View>

            </Callout>

风格：

const styles = StyleSheet.create(
   bubble:
    flex:1,
    flexDirection:'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 6,
    borderColor: 'white',
    width: 200,
    height: 250,
  ,
text: 
  textAlign: 'center',
  fontSize: 20,
  color: 'black',
  fontWeight: 'bold',
  paddingTop:1 
,
image: 
    width: 160,
    height: 160,
  ,
 view1:
    flex:3,
    width: '100%',
    backgroundColor: 'red'
  ,
  view2:
    flex:7,
    width: '100%',
    backgroundColor: 'yellow',
    alignItems: 'center', 
    justifyContent: 'flex-start'

);

有人可以帮助我吗？非常感谢！

【参考方案1】：

这里的问题是您在 view1 上使用 flex: 3 和在 view2 上使用 flex: 7。

这意味着总空间的 30% 用于顶视图，70% 用于底视图。尝试使用这些值来更改两个视图之间共享可用空间的方式。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

我试图改变 flex 但图像被剪切并且空间仍然存在