如何键入图像链接并使它们显示在下面的黄色视图中？

Question

class Newsfeed extends React.Component{
    constructor(props){
      super(props)
    this.state = {
      text: ''
    }
  };
   render(){
    return (
       <View>

      <Text style={{fontSize: 50}}>Junior Facebook</Text>
      <View style={{flex: 1, flexDirection: "column"}} />
      <View style={{top: 20, marginLeft: 0, width: 300, height: 180, backgroundColor: "lightblue"}}>
      <TextInput
          style={{
            height: 150,
            borderStyle: "solid",
            borderWidth: 2,
            fontSize: 30
          }}
          placeholder="New Post"
          onChangeText={(text)=>this.setState({text})}
          value={this.state.text}
        />
        <TouchableOpacity
          style={{ backgroundColor: "green", marginLeft: 220, width: 80, height: 30 }}
        >
          <Text style={{fontSize: 20}}>Enter</Text>

        </TouchableOpacity>

      </View>

      <View style={{marginTop: 30, marginLeft: 0, width: 300, height: 180, backgroundColor: "pink"}} >
      <TouchableOpacity style={{width: 65, height: 45, marginLeft: 260, marginTop: 160}}><Text>Share</Text></TouchableOpacity>
      <TouchableOpacity style={{width: 65, height: 45, marginLeft: 230, marginTop: -45}}><Text>Like</Text></TouchableOpacity>
      </View>

      <View style={{marginTop: 10, marginLeft: 0, width: 300, height: 130, backgroundColor: "yellow"}} >
      <Image source={{uri: this.state.text}} style={{width:200, height: 90}} />
     </View>
    </View>
  ) 
  }
}

以上是我的代码，当前，当我键入图像链接时，图像将显示在下面的黄色视图中。我希望在输入图像链接并单击“输入”按钮时显示图像。另外，我希望以前的图像保留在黄色框中。我该怎么办？

谢谢

Answer 1