具有嵌套内容和边框半径的图像答案

【问题标题】：Image with nested content and borderRadius具有嵌套内容和边框半径的图像
【发布时间】：2018-02-24 14:49:47
【问题描述】：

我对带有嵌套内容的Image 组件上的borderRadius 有疑问。我不明白为什么borderRadius: 15 不显示任何内容。如果我删除嵌套的<Text> 行，边框半径可以正常工作。

return (
 <View style={[styles.imageContainer, styles.margins]}>
   <Image source={IMAGES.loginBackground} style={styles.image}>
     <Text>Itinéraire</Text>
   </Image>
 </View>
)

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

我做错了吗？

【问题讨论】：

标签： react-native jsx

【解决方案1】：

我测试了您的代码，它在这里运行良好。唯一的区别是我使用source={require('imgpath/img.png')} 并且没有将View 样式设置为数组，因为没有styles.margins 的代码。您是否在其他地方设置了任何样式，例如 styles.margins？

我还注意到您在 styleSheetCreate 末尾缺少)：

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

应该是这样的：

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
});

我还建议将您的 const styles 添加到您的 render() 之外。

希望对你有帮助。

【讨论】：

我会试试这个，谢谢。我可能忘了过去一些像 style.margins 这样的代码，但它并没有改变任何东西。很明显，钢片在render之外，这也是消息格式化的错误

【解决方案2】：

您可以使用<View> 在您的图片上制作透明边框，例如：

<View style={{borderRadius:10}}>
    <Image  borderRadius={10} ....   />
</View>

【讨论】：