如何在 React Native 中有条件地隐藏和显示卡片按钮组件

Question

我有一个议程组件，其中标记了两种不同类型的事件，一些是橙色的，一些是深蓝色的：

我希望只有深蓝色事件有删除按钮。

卡片上的信息来自 Firebase。

 constructor(props) {
    super(props);

    this.state = {
      items: {},
      selected: "",
      usuarios: [],
      usuariosAgenda: [],
    
    };
  }
  
  componentDidMount() {
    firebase
      .database()
      .ref("DatosCli/")
      .on("child_added", (data) => {
        var datos = data.val();       
        var usuariosTemp = this.state.usuarios;
        datos.key = data.key;         
        usuariosTemp.push(datos);
        this.setState({ usuarios: usuariosTemp });
      });

    firebase
      .database()
      .ref("agenda/")
      .on("child_added", (data) => {
        var datos = data.val();
        var usuariosTemp2 = this.state.usuariosAgenda;
        datos.key = data.key;
        usuariosTemp2.push(datos);
        this.setState({ usuariosAgenda: usuariosTemp2 });
      });
  }

事件代码橙色：

 const markedDates = {};
  
    this.state.usuarios.map((usuarioTemp) => {
      markedDates[usuarioTemp.date] = {
      
        selected: true,
        disableTouchEvent: false,
        selectedColor: "orange",
        selectedTextColor: "red",
      };
    });

    -----This goes through the database and puts the information that goes in the item card----

    const items = {};
    this.state.usuarios.map((usuarioTemp) => {
      if (this.state.selected == usuarioTemp.date) {
        items[this.state.selected] = [
          {
            name:
              "Nombre: " +
              usuarioTemp.nombre +
              "\n" +
              "Celular: " +
              usuarioTemp.celular +
              "\n" +
              "Direccion :" +
              usuarioTemp.direccion,

              conditionally: { isDeletable: false },
          },
        ];
       
      }
    });

深蓝色事件代码（在这个事件中是我想要删除按钮的地方）：

   this.state.usuariosAgenda.map((usuarioTemp2) => {
      markedDates[usuarioTemp2.date] = {
        selected: true,
        disableTouchEvent: false,
        selectedColor: "blue",
        selectedTextColor: "white",
      };
    });
    
     ----- This goes through the database and puts the information that goes in the item card----

        this.state.usuariosAgenda.map((usuarioTemp2) => {
      if (this.state.selected == usuarioTemp2.date) {
        items[this.state.selected] = [
          {
            name:
              "Nombre: " +
              usuarioTemp2.nombre +
              "\n" +
              "Celular: " +
              usuarioTemp2.celular +
              "\n" +
              "Direccion :" +
              usuarioTemp2.direccion +
              "\n" +
              "Evento :" +
              usuarioTemp2.evento,

              conditionally: { isDeletable: true },
          },
        ];
      }
    });

最后这是呈现项目的代码：

renderItem(item) {
    return (
      <TouchableOpacity
        style={[styles.item, { height: item.height }]}
        onPress={() => alert(item.name)}
      >
        <Card>
          <CardContent text={item.name} />
  
           {item.conditionally && 
          <CardAction separator={true} inColumn={false}>
            <CardButton
              title="Delete"
              color="purple"
              onPress={this.eliminarEvento.bind(this)}
            />
          </CardAction>
          }
        </Card>
      </TouchableOpacity>
    );
  }

Return:

<View style={styles.container}>
      
        <Agenda
          renderEmptyData={() => {
            return (
              <View>
                <Text>DIA VACIO</Text>
              </View>
            );
          }}
          renderItem={this.renderItem.bind(this)}
          items={items}
          markedDates={markedDates}
          style={{ width: "100%" }}
        />
        <TouchableOpacity
          onPress={() =>
            this.props.navigation.navigate("otro", {
              updateCurrentTask: this.state.selected,
            })
          }
          style={styles.viewTask}
        >
          <Image
            source={require("../img/plus.png")}
            style={{
              height: 30,
              width: 30,
            }}
          />
        </TouchableOpacity>
      </View>

Answer 1

除了name之外，为每个项目添加一个布尔值属性（我们称之为isDeletable）。映射 usuarios 项时将其设置为 false，映射 usuariosAgenda 项时将其设置为 true。

// item originating from usuarios
{
  name: 'an item name',
  isDeletable: false
}

// item originating from usuariosAgenda
{
  name: 'another item name',
  isDeletable: true
}

然后在您的 renderItem 方法中，检查属性:

的值

renderItem(item) {
  return (
    <TouchableOpacity
      style={[styles.item, { height: item.height }]}
      onPress={() => alert(item.name)}
    >
      <Card>
        <CardContent text={item.name} />

        {item.isDeletable &&
          <CardAction separator={true} inColumn={false}>
            <CardButton
              title="Delete"
              color="purple"
              onPress={this.eliminarEvento.bind(this)}
            />
          </CardAction>
        }
      </Card>
    </TouchableOpacity>
  );
}

如何在 React Native 中有条件地隐藏和显示卡片按钮组件

How to conditionally hide and show a card button component in React Native

javascript

dom-events

reactjs

react-native