Question

嗨，我正在componentdidmount生命周期中设置我的状态。.但是在图像url中什么都没有设置，但是当我发出警报时，它给出了我的URL，这是我的代码处于设置状态的地方。.

componentDidMount(){
ls.get("savedata").then(data => { this.setState({ name: data.user.name },()=>{alert(this.state.name)}); });
ls.get("savedata").then(data => { this.setState({ image: data.user.profile_photo },()=>alert(this.state.image)); });
    }

这是使用图像组件的视图

          <Image source={{uri:this.state.image}}style={{width: 130, height: 110}}

Answer 1

我为您编写了一些代码，此示例正在运行。您可以在博览会上尝试。希望对您有所帮助：）我将Image容器与两个图像链接在一起，一个接一个。

 componentDidMount(){
    this.setState({image: "https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg"}, () =>{
      this.setState({image: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg"})
    } );
  }


  render() {
    return (
      <View style={styles.container}>
      {this.state.image ?
        <Image source={{uri: this.state.image}} style={{width: 130, height:110}}/>
        : 
        null
      }
      </View>
    );
  }
}

Answer 2

用于静态图像资源

React Native提供了一种在iOS和Android应用程序中管理图像和其他媒体资产的统一方法。要将静态图片添加到您的应用中，请将其放置在源代码树中的某个位置，并像这样引用它：

<Image source={require('./my-icon.png')} />

Answer 3

如果您的图片存储在本地，则Image标签应如下所示：

    <Image
      style={styles.stretch}
      source={require(this.state.image)}
    />

想要通过在React Native中使用状态来设置图像URL

3 个答案: