Question

我使用了嵌套图像，因此我可以在加载图像时使用占位符，外部图像上的边框半径根本不起作用

      <Image
        style={{
          width: imageWidth / 1.5,
          height: imageWidth / 1.5,
          borderRadius: imageWidth,
        }}
        source={placeholder}
      >
        <Image
          style={{
            width: imageWidth / 1.5,
            height: imageWidth / 1.5,
            borderRadius: imageWidth,
          }}
          source={{uri: 'some https image source'}
        />
      </Image>

它看起来像这样：

关于如何解决此问题或以其他方式实施占位符的任何想法。

Answer 1

我现在使用以下内容，在iOS上你必须有一个视图包装图像以显示图像。

<TouchableOpacity
          style={[CommonStyles.PlaceholderColor,
            { width: imageWidth / 1.75,
              height: imageWidth / 1.75,
              borderRadius: imageWidth }]}
          onPress={() => {
            InteractionManager.runAfterInteractions(() => {
              Actions.friendProfile({ user });
            });
          }}
        >
          <View
            style={{
              width: imageWidth / 1.75,
              height: imageWidth / 1.75,
              borderRadius: imageWidth,
              overflow: 'hidden'
            }}>
            <Image
              style={{
                width: imageWidth / 1.75,
                height: imageWidth / 1.75,
                ...Platform.select({
                  android: {
                    borderRadius: imageWidth
                  }
                })
              }}
              source={source}
            />
          </View>
 </TouchableOpacity>

Answer 2

有很多方法可以做到这一点，虽然它可能不是最有效的，但我认为你可以通过使用方法来实现这一点。

类似......

// ....other code
showImage(){
    if (not ready){
        return 'a different URI';
    }
    return 'original URI'
}

render(){
    renturn (
        <Image
            style={{
                width: imageWidth / 1.5,
                height: imageWidth / 1.5,
                borderRadius: imageWidth,
            }}
            source={this.showImage.bind(this)}
        />
)}

您也可以在使用状态时应用相同的逻辑，但考虑到我不知道您的程序的范围，更改状态可能并不理想。

Answer 3

对于有图像等的borderRadius问题的人-在四处寻找之后，这对我才有用： About React Example 基本上-您需要使用封闭视图来设置尺寸和边框，并且图像本身也要具有基本尺寸

React Native：嵌套图像上的borderRadius不起作用

3 个答案: