React native 如何删除react js中的视图

我已添加动态视图并希望删除动态。我已为删除视图创建了一个按钮并警告键的值。我已添加动态视图并希望删除动态。我已为删除视图创建了一个按钮并警告键的值。我已添加动态视图并希望删除动态。我已为删除视图和键创建了一个按钮警告键的值

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

import React，{Component}来自“React”；
进口{
样式表，
看法
文本，
形象,，
滚动视图，
可触摸不透明度，
按钮
文本输入，
有生气的
平台，
采摘者
}从“反应本族语”；
const width=“46%”；
常数宽度1=“48%”；
导出默认类MyApp扩展组件{
构造函数（）{
超级（）；
此.state={
ViewArray:[]，
费用：“，
总数：，
服务名称：“
};
//this.animatedValue=新的Animated.Value（0）；
this.Array_Value_Index=0；
}
_移除已服务的详细信息{
警报；
}
getServiceDetails（a）{
让New_Added_View_Value={Array_Value_Index:this.Array_Value_Index}；
让charge=“250”；
让total_amo=“5000”；
让服务_name=“TCP”；
这是我的国家(
{
冲锋：冲锋，
总数：总数，
服务名称：服务名称，
ViewArray:[…this.state.ViewArray，新添加的\u视图\u值]
},
() => {
this.Array\u Value\u Index=this.Array\u Value\u Index+1；
}
);
console.log（“array value=“+this.array\u value\u Index”）；
}
render（）{
让Render_Animated_View=this.state.ViewArray.map（（项，键）=>{
控制台日志（键）；
返回(
服务
{this.state.service_name}
医生
this.setState（{payer:event}）}
>
数量
this.setState（{uhid:event.target.value}）
underlineColorAndroid=“透明”
style={style.TextInputStyleClasscolumn}
/>
冲锋
{this.state.charge}
总金额
{this.state.total_amo}
去除
这个。_removeServiceDetails（key）}
title=“按我”
>
去除
);
});
返回(
{渲染动画视图}
);
}
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
背景色：“eee”，
辩护内容：“中心”，
paddingTop:Platform.OS==“ios”？20:0
},
动画视图样式：{
身高：60，
背景颜色：“FF9800”，
对齐项目：“中心”，
辩护内容：“中心”，
保证金：5
},
查看\u内部\u文本：{
颜色：“fff”，
字体大小：24
},
可触摸不透明样式：{
位置：“绝对”，
宽度：50，
身高：50，
对齐项目：“中心”，
辩护内容：“中心”，
右:30,，
底数：30
},
浮动按钮样式：{
resizeMode:“包含”，
宽度：50，
身高：50
},
主容器：{
辩护内容：“中心”，
弹性：1，
差额：10
},
MainContainerModel：{
辩护内容：“中心”，
差额：10
},
TextInputStyleClass：{
textAlign：“居中”，
marginBottom:7，
身高：40，
边框宽度：1，
边框颜色：“2196F3”，
边界半径：5
},
TextInputStyleClasscolumn：{
textAlign：“居中”，
marginBottom:7，
身高：40，
宽度：“70%”，
边框宽度：1，
边框颜色：“2196F3”，
边界半径：5
},
选择器样式：{
textAlign：“居中”，
marginBottom:7，
身高：40，
边框宽度：1，
边框颜色：“2196F3”，
边界半径：5
},
标题散点选择器：{
位置：“绝对”，
宽度：“100%”，
高度：“100%”，
颜色：“透明”，
不透明度：0
},
TextComponentStyle：{
尺寸：20，
颜色：“000”，
textAlign：“居中”，
marginBottom:2
},
日期选择器：{
弹性：1，
对齐项目：“中心”，
辩护内容：“中心”，
玛金托普：50，
填充：16
},
TextStyleRow：{
宽度，
textAlign：“左”，
fontWeight：“粗体”，
marginRight:10
},
文本以粗体显示：{
颜色：“f50000”，
fontWeight：“粗体”
}
});

您可以通过管理isViewVisible状态来隐藏/显示您的

组件，当单击按钮时，将按钮的状态分别切换为isViewVisible true或false。在渲染函数中，可以添加以下内容

---

{this.state.isViewVisible？你想在里面写什么：null}

我在组件中添加了4个视图，那么如何隐藏第三个视图呢？只需按照我在上面的答案中给出的格式包装第三个视图，然后你就可以随意隐藏或显示。