react-native onPress 克隆元素

Question

我在 react-native 中有这个组件，当我按下按钮时，我需要克隆整个视图。

我该怎么做？

        import React, { Component } from 'react';
        import {
          Platform, Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';

        import styles from '../../assets/Styles'

        class AccountForm extends Component {

        render() {
            return (

            <View>
              <TextInput
                style={styles.input2}
                placeholder="Registered addresses"
              />
              <TouchableOpacity style={styles.AddIcon}>
                  <Image source={require('../../assets/images/addicon.png')}/>
                </TouchableOpacity>
            </View> 

            );
          }
        }

        export default AccountForm;

Answer 1

我假设，您想在点击Image 时添加一个TextInput。您可以根据需要进行修改。

import React, { Component } from 'react';
import {
  Platform, 
  Text,
  Image,
  View, 
  TextInput, 
  TouchableOpacity, 
  ScrollView 
} from 'react-native';

import styles from '../../assets/Styles'

class AccountForm extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
    this.addMore = this.addMore.bind(this);
  }

  addMore() {
    this.setState({
      count: ++this.state.count,
    })
  }

  renderAddress() {
    const elements = [];
    for (let i = 0; i < this.state.count; i++) {
      elements.push(
        <TextInput key={i}
          style={styles.input2}
          placeholder="Registered addresses"
        />
      );
    }
    return elements;
  }

  render() {
    return (
    <View>
      {this.renderAddress();}
      <TouchableOpacity onPress={this.addMore} style={styles.AddIcon}>
          <Image source={require('../../assets/images/addicon.png')}/>
        </TouchableOpacity>
      }
    </View> 

    );
  }
}

export default AccountForm;