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

Question

我想在标记组件（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'
}
});

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

Answer 1

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

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