borderRadius无法在React Native中与Image uri标签一起使用

Question

我正在我的应用程序中添加个人资料图片模块。我使用 borderRadius 将图像绘制在圆圈中。当我从资产文件夹中获取图像时，它可以正常工作，但是当我从URL中呈现图像时，则不能使用。这是代码

从URL渲染图像时：

<View style={styles.MainContainer}>
        <Image
          source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/2_img.png' }}
          style={{ width: 150, height: 150, borderRadius: 150 / 2 }} />
      </View>

从资源文件夹渲染图像时：

 <View style={styles.MainContainer}>
        <Image source={require("../../assets/img/rupee.png")}
          style={{ width: 150, height: 150, borderRadius: 150 / 2 }} />
      </View>

Css代码：

const styles = StyleSheet.create({

  MainContainer:
  {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    paddingTop: (Platform.OS === 'ios') ? 20 : 0
  }
});

Answer 1

经过一些试验，我发现这是图像URL问题。图片网址包含https。当我使用带有http而不是https的图像URL时，它可以正常工作，感谢大家的努力和建议。

Answer 2

尝试以下代码：

   import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image, Text } from 'react-native';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.setFontSize}> Normal Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorder} />

        <Text style={styles.setFontSize}> Border Radius Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorderRadius} />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setFontSize: {
    fontSize: 20,
    fontWeight : 'bold' 
  },
  setBorder:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 3,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here.   
  },
  setBorderRadius:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 3,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here. 
    borderRadius: 60,  // Set border Radius.   
  }
});