React Native 仅当高度和宽度为固定值时才显示图像

uwopmtnx 于 2023-10-22 发布在 React

关注(0)|答案(2)|浏览(172)

这是最令人沮丧的事情。当我通过image style属性将图像的宽度和高度设置为“100%”时，图像不显示：

但是，当我将其设置为固定值时：

下面是我的render（）：

render() {
    const { images } = this.props;
    return (
      <View style={styles.container}>
        {images.map((image, index) => (
          <Animated.Image
            {...this.panResponder.panHandlers}
            key={index}
            source={{ uri:`${encodeURI(image)}` }}
            style={[
              styles.image,
              // {
              //   transform: [{ translateX: this.pan.x }],
              //   zIndex: index === this.state.currentIndex ? 1 : 0,
              // },
            ]}
          />
        ))}
      </View>
    );
  }

react-native

来源：https://stackoverflow.com/questions/77271524/image-is-only-displayed-when-height-and-width-are-fixed-values

2条答案

按热度按时间

zxlwwiss1#

如果将图像的width和height设置为100%，则表示图像具有与其父组件相同的width和height。
在本例中，您没有将size设置为父组件，因此图像的width和height等于0

赞(0）回复(0）举报 2023-10-22

gkn4icbw2#

尝试将父view的width和height设置为'100%'，而不是flex: 1，或者仅在父flex: 1中添加另一个视图，height，'100%'的width
EX.

<View style={styles.container}>
    <View style={{height: '100%', width: '100%'}}>
        {images.map((image, index) => (
          <Animated.Image
            {...this.panResponder.panHandlers}
            key={index}
            source={{ uri:`${encodeURI(image)}` }}
            style={[
              styles.image,
              // {
              //   transform: [{ translateX: this.pan.x }],
              //   zIndex: index === this.state.currentIndex ? 1 : 0,
              // },
            ]}
          />
        ))}
    </View>
</View>

展开查看全部

赞(0）回复(0）举报 2023-10-22

我来回答

React Native 仅当高度和宽度为固定值时才显示图像

2条答案

相关问题

热门标签

最新问答