如何根据在 React Native 中的 DropDownPicker 中选择的项目显示/隐藏组件？

Question

我正在尝试对 select 使用“react-native-dropdown-picker”并保留从 DropDownPicker 树中选择的项目。

对于列表中的“日期”项目，我想在选择日期时显示“您选择日期”的文本“您选择日期”，并在用户取消选择时隐藏文本。 如何在 React Native 中添加条件语句以便我的计划有效？

这是我的代码：

---

import { Component } from 'react';

import { React, useEffect } from 'react';

import { useState } from 'react';

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View } from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {

  const [open, setOpen] = useState(false);

  const [value, setValue] = useState(['date', 'fruits', 'banana', 'apple', 'dairy', 'milk', 'cheese']);

  const [items, setItems] = useState([
    {label: 'Date', value: 'date'},

{label: 'Fruits', value: 'fruits'},
{label: 'Article', value: 'article', parent: 'fruits'},
{label: 'Banana', value: 'banana', parent: 'fruits'},
{label: 'Apple', value: 'apple', parent: 'fruits'},

{label: 'Dairy Products', value: 'dairy products'},
{label: 'Milk', value: 'milk', parent: 'dairy products'},
{label: 'Cheese', value: 'cheese', parent: 'dairy products'},

  ]);


  return (
    <View style={styles.container}>
      <View style={styles.boxes}>
        <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}

    theme="LIGHT"
    multiple={true}
    mode="BADGE"
    badgeDotColors={["blue", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a", "green"]}
  />
  </View>

  <View> 
    <Text style={styles.text}> YOU CHOOSE DATE</Text>
  </View>
  <StatusBar style="auto" />
</View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  boxes: {
    flexDirection: 'row',
    marginTop: '40%',
  },
  text: {
    fontSize: 20,
    fontStyle: 'bold',
    marginTop: '60%',
  }
});

该应用程序应如下所示：选择日期 取消选择日期

Answer 1

值返回数组，所以必须像这样检查

const isDateOnly = () => {
    return (
      Object.values(value).length === 1 &&
      Object.values(value).indexOf('date') > -1
    );
  };

然后你可以像这样检查渲染中的条件

<View>
        {isDateOnly() ? (
          <Text style={styles.text}> YOU CHOOSE DATE</Text>
        ) : null}
      </View>