如何在React JS中删除视图

Question

我添加了动态视图并想删除动态视图。我创建了一个用于删除视图并警告键值的按钮。我添加了动态视图并想要移除动态视图。我创建了一个按钮以删除视图并提醒键的值。我添加了动态视图，并想删除动态视图。我创建了一个用于删除视图的按钮并提醒键的值。

import React, { Component } from "react";

import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  Button,
  TextInput,
  Animated,
  Platform,
  Picker
} from "react-native";
const width = "46%";
const width1 = "48%";
export default class MyApp extends Component<{}> {
  constructor() {
    super();
    this.state = {
      ViewArray: [],
      charge: "",
      total_amo: "",
      service_name: ""
    };

    // this.animatedValue = new Animated.Value(0);
    this.Array_Value_Index = 0;
  }
  _removeServiceDetails(s) {
    alert(s);
  }
  getServiceDetails(a) {
    let New_Added_View_Value = { Array_Value_Index: this.Array_Value_Index };
    let charge = "250";
    let total_amo = "5000";
    let service_name = "TCP";
    this.setState(
      {
        charge: charge,
        total_amo: total_amo,
        service_name: service_name,
        ViewArray: [...this.state.ViewArray, New_Added_View_Value]
      },
      () => {
        this.Array_Value_Index = this.Array_Value_Index + 1;
      }
    );
    console.log("array value =" + this.Array_Value_Index);
  }

  render() {
    let Render_Animated_View = this.state.ViewArray.map((item, key) => {
      console.log(key);
      return (
        <View key={key} style={{ backgroundColor: "#d7ebf9", marginBottom: 5 }}>
          <View style={{ flexDirection: "row" }}>
            <Text style={styles.TextStyleRow}>Service</Text>
            <Text style={styles.TextStyleRow}>{this.state.service_name}</Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text style={{ width: "100%" }}>Doctor</Text>
          </View>
          <View style={styles.pickerStyle}>
            <Picker
              selectedValue={this.state.payer}
              style={styles.pickerStyle}
              underlineColorAndroid="transparent"
              onValueChange={event => this.setState({ payer: event })}
            >
              <Picker.Item label="Select Doctor" value="" />
              <Picker.Item label="sadsad" value="1" />
            </Picker>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text style={{ width: "30%" }}>Qty</Text>
            <TextInput
              placeholder="Quantity"
              value={this.state.uhid}
              onChange={event => this.setState({ uhid: event.target.value })}
              underlineColorAndroid="transparent"
              style={styles.TextInputStyleClasscolumn}
            />
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text style={styles.TextStyleRow}>Charge</Text>
            <Text style={styles.TextStyleRow}>{this.state.charge}</Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text style={styles.TextStyleRow}>Total Amount</Text>
            <Text style={styles.TextStyleRow}>{this.state.total_amo}</Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text style={styles.TextStyleRow}>Remove</Text>
            <Button
              onPress={() => this._removeServiceDetails(key)}
              title="Press Me"
            >
              <Text>Remove</Text>
            </Button>
          </View>

          <View
            style={{ flex: 1, alignSelf: "stretch", flexDirection: "row" }}
          ></View>
        </View>
      );
    });

    return (
      <View style={styles.MainContainer}>
        <View style={styles.pickerStyle}>
          <Picker
            selectedValue={this.state.payer}
            style={styles.pickerStyle}
            underlineColorAndroid="transparent"
            onValueChange={this.getServiceDetails.bind(this)}
          >
            <Picker.Item label="Select Service" value="" />
            <Picker.Item label="TCP" value="1" />
            <Picker.Item label="CONSULTATION" value="2" />
            <Picker.Item label="CBC" value="3" />
            <Picker.Item label="BILIRUBBIN" value="4" />
          </Picker>
        </View>
        <ScrollView>
          <View style={{ flex: 1, padding: 2 }}>{Render_Animated_View}</View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    backgroundColor: "#eee",
    justifyContent: "center",
    paddingTop: Platform.OS == "ios" ? 20 : 0
  },

  Animated_View_Style: {
    height: 60,
    backgroundColor: "#FF9800",
    alignItems: "center",
    justifyContent: "center",
    margin: 5
  },

  View_Inside_Text: {
    color: "#fff",
    fontSize: 24
  },

  TouchableOpacityStyle: {
    position: "absolute",
    width: 50,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    right: 30,
    bottom: 30
  },

  FloatingButtonStyle: {
    resizeMode: "contain",
    width: 50,
    height: 50
  },
  MainContainer: {
    justifyContent: "center",
    flex: 1,
    margin: 10
  },
  MainContainerModel: {
    justifyContent: "center",
    margin: 10
  },
  TextInputStyleClass: {
    textAlign: "center",
    marginBottom: 7,
    height: 40,
    borderWidth: 1,
    borderColor: "#2196F3",
    borderRadius: 5
  },
  TextInputStyleClasscolumn: {
    textAlign: "center",
    marginBottom: 7,
    height: 40,
    width: "70%",
    borderWidth: 1,
    borderColor: "#2196F3",
    borderRadius: 5
  },
  pickerStyle: {
    textAlign: "center",
    marginBottom: 7,
    height: 40,
    borderWidth: 1,
    borderColor: "#2196F3",
    borderRadius: 5
  },
  headlessAndroidPicker: {
    position: "absolute",
    width: "100%",
    height: "100%",
    color: "transparent",
    opacity: 0
  },
  TextComponentStyle: {
    fontSize: 20,
    color: "#000",
    textAlign: "center",
    marginBottom: 2
  },
  DatePicker: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 50,
    padding: 16
  },
  TextStyleRow: {
    width,
    textAlign: "left",
    fontWeight: "bold",
    marginRight: 10
  },
  TextRedwithbold: {
    color: "#f50000",
    fontWeight: "bold"
  }
});

Answer 1

您可以通过管理状态isViewVisible来隐藏/显示<View></View>组件，并在单击按钮时将按钮的状态分别切换为isViewVisible true或false。在render函数中，您可以添加此 {this.state.isViewVisible?<View>what ever you wanna write inside</View>:null}