如何获得一个图片链接作为输入，并使其出现在下面的视图组件上？

Question

class Newsfeed extends React.Component{
    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"
        />
        <TouchableOpacity
          style={{ backgroundColor: "green", marginLeft: 220, width: 80, height: 40 }}
        >
          <Text style={{fontSize: 24}}>Enter</Text>

        </TouchableOpacity>

      </View>

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

      <View style={{marginTop: 10, marginLeft: 0, width: 300, height: 130, backgroundColor: "yellow"}} >

      </View>
    </View>
  ) 
  }
}

以上是我目前的代码。当我在TextInput中输入一个图片链接时，我想让图片出现在下面的黄色视图组件上。我试过很多不同的方法，但还是不行。请问我怎么才能做到呢？

请教一下，谢谢

Answer 1

@高鵬翔的回答很完美，但說你想在點擊 "進入 "按鈕後再顯示圖片。所以我的解决方案是这样的。

...
...
import { View, Text, Image } from "react-native";
...
...

//state 
this.state = {
  link: "",
  enteredImageUri: "",
};

render() {
  return (
    <View>
      ...
      ...
      <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"
          value={this.state.link}
          onChangeText={(link) => this.setState({ link })}
        />
        <TouchableOpacity
          style={{
            backgroundColor: "green",
            marginLeft: 220,
            width: 80,
            height: 40,
          }}
          onPress={() => {
            this.setState({
              enteredImageUri: this.state.link,
            });
          }}
        >
          <Text style={{ fontSize: 24 }}>Enter</Text>
        </TouchableOpacity>
      </View>

      <View>
        {/* Image View */}
        {this.state.enteredImageUri === "" ? (
          <Text>No Image link entered</Text>
        ) : (
          <Image
            source={{ uri: this.state.enteredImageUri }}
            style={{ width: 400, height: 400 }}
          />
        )}
      </View>
      ...
      ...
    </View>
  );
}

如你所见，我只是将textinput文本分配到另一个状态变量中。enteredImageUri，它将被用来显示图像。

Answer 2

您必须使用 图片标签 来显示图像。

像这样。

import {Image} from 'react-native';

...
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
       style={{width: 400, height: 400}} />

就像@Will说的那样，你必须将文本输入存储为一个状态来控制Image. 所以你必须添加一个状态，文本输入应该像这样:

constructor(props) {
    super(props);
    this.state = { text: '' };
}
<TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />

看看你是如何控制Image视图来显示这样的东西的, 但是如果URLI没有完成，这可能是错误的? 基于你什么时候传递正确的uri让它显示，但这是另一个问题。

import {Image} from 'react-native';

...
<Image source={{uri: this.state.text}}
       style={{width: 400, height: 400}} />