react-native - 如何输入图像链接并使其显示在下面的黄色视图中？

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>
  ) 
  }
}

以上是我的代码，目前，当我输入图片链接时，下面的黄色视图中会出现一张图片。我希望在我输入图像链接并单击“Enter”按钮时出现我的图像。另外，我希望我以前的图像保留在黄色框中。我该怎么做？

谢谢

标签： react-native

Answer 1

您需要在状态中有一个链接数组，并通过将数组元素映射到图像来显示它。代码是这样的

class Newsfeed extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        text: '',
        images: []
    }
};
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 }}
                    onPress={() => {


                        this.setState({ images: [...this.state.images, this.state.text] });
                    }}
                >
                    <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" }} >
                {this.state.images.map(link => <Image source={{ uri: link }} style={{ width: 200, height: 90 }} />)}
            </View>
        </View>
    )
}

}