如何根據在 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>