React Native中如何根据DropDownPicker选中项显示/隐藏组件

核心逻辑是通过判断选中值数组value中是否包含'date'，来控制文本的显示与隐藏，具体实现步骤如下：

1. 利用数组的includes()方法检测value中是否存在'date'
2. 使用React的条件渲染语法，只有当检测结果为真时才渲染目标文本

修改后的完整代码如下：

import React, { 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 products', '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>

      {/* 条件渲染目标文本 */}
      {value.includes('date') && (
        <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%',
  }
});

关键修改点说明 #

• 移除了未使用的Component和useEffect导入，精简代码
• 修正了初始value数组中的'dairy'为'dairy products'（与items中的值对应，避免选中状态异常）
• 添加了条件渲染逻辑：{value.includes('date') && <View>...</View>}，当value数组包含'date'时才渲染文本容器

内容的提问来源于stack exchange，提问作者iMikou96