对象数组数据源的本机模式下拉问题

Question

我终于找到了一个似乎适合我需要的下拉菜单，但我在使用该工具时遇到了一些问题..

我的 dropdata 是一个数组 ob 对象，其中包含标签和值对。 当我尝试将其用作下拉列表的源时，我必须使用 ModalDropdown 中的 renderRow 道具来正确显示我的标签.. 通过阅读官方文档，我找到了这样的解决方案，除了这个问题之外，它似乎工作正常： 初始渲染后，我的下拉列表中的项目不完整，如果用户在列表中选择这些选项之一，选项的数量会发生变化。 在我看来非常奇怪的行为，我无法真正说出为什么会发生这种情况或该怎么做.. 如果我将数据源切换到一个简单的字符串数组（data2），没有 renderRow 处理，一切正常， 并且完整的列表可以毫无问题地呈现出来...... 所以问题可能出在 renderDropDownList 函数中，但由于这看起来也很简单，我认为那里没有问题。 另一个想法是默认值/索引可能会有所帮助？但还没有成功.. 也许有人可以帮我找到解决方案，我将不胜感激:)

import ModalDropdown from 'react-native-modal-dropdown';
import { Card } from 'react-native-elements';
import  React, { useState } from 'react';


function Home() {

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  
  let data = [{label: 'Choose', value: '0'}, {label: '1 foo', value: '1'}, {label: '2 foo', value: '2'}, {label: '3 foos', value: '3'}, {label: '4 foos', value: '4'}, {label: '5 foos', value: '5'}, {label: '6 foos', value: '6'}, {label: '7 foos', value: '7'}, {label: '8 foos', value: '8'}, {label: '9 foos', value: '9'}, {label: '10 foos', value: '10'}, {label: '11 foos', value: '11'}, {label: '12 foos', value: '12'}, {label: '13 foos', value: '13'}, {label: '14 foos', value: '14'}, {label: '15 foos', value: '15'}, {label: '16 foos', value: '16'}, {label: '17 foos', value: '17'}, {label: '18 foos', value: '18'}, {label: '19 foos', value: '19'}, {label: '20 foos', value: '20'}];
  let data2 = ['1','2','3','4','5','6','7','8','9','10','11',]

  const setItem = value => {
    console.log("you touched option: " + value.value);
  }

  const renderDropDownList = (rowData) => {
    return (
      <View style={{backgroundColor: colors.cardBackgroundColor, alignItems: 'flex-end', marginLeft: 0}}>
        <Text style={{color: colors.textSubtitleColor, fontSize: 12}}>{rowData.label}</Text> 
      </View>
    );
  }

    const renderButtonText = (rowData) => {
      const {label, value} = rowData;
      return `${label}`;
    };


  return (
    <Card containerStyle={{height:200, backgroundColor: 'gray'}}>

        <ModalDropdown 
            options={data}
            renderRow={(rowData) => renderDropDownList(rowData)}
            renderButtonText={(rowData) => renderButtonText(rowData)}
            style={{backgroundColor:'transparent', borderColor: 'gray'}}
            dropdownStyle={{backgroundColor:'white', borderColor: 'gray', marginBottom: 2}}
            onSelect={(idx, value) => setItem(value)}
            />
     

     // ...
    </Card>

  );
};

export default Home;

Answer 1

我已经找到了解决问题的方法

配置每个项目的样式只能在一个地方完成，我有两次，一次在渲染函数中，一次作为道具“dropdownStyle”。 事实证明，这两个人互相打扰：D

在下面查看我的工作代码：

 import React, { useState } from 'react';
 import {StyleSheet, View, Text, TouchableHighlight} from 'react-native';
 import { Icon} from 'native-base';
 import { useTheme} from '@react-navigation/native';
 import ModalDropdown from 'react-native-modal-dropdown';
 
 function myPicker() {
 
    const { colors } = useTheme(); // works
    
    const renderDropDownList = (rowData, rowID, highlighted) => {
        return  <Text style={{color: colors.textSubtitleColor, fontSize: 11, fontWeight:"300", padding: 2}}>{rowData.label}</Text>
    }

    const renderButtonText = (rowData) => {
        const {label, value} = rowData;
        return <View><Text style={{fontSize: 11,fontWeight: "500", color: colors.textSubtitleColor}}>{label}</Text></View>;
    }

    const renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => {
        if (rowID == items.length - 1) return;
        return <View style={{height: 1, width: 0, backgroundColor: 'gray'}}/>
        
    }

    const dropdown_adjustFrame = (style) => {
        // console.log(`frameStyle={width:${style.width}, height:${style.height}, top:${style.top}, left:${style.left}, right:${style.right}}`);
        style.width = 100;
        style.top += 4;
        style.left -= 49;
        return style;
    }
      
    return (
          <View style={{flex: 5}}>
               <ModalDropdown 
                  options={items}
                  defaultValue="Choose"
                  textStyle={{color: colors.textSubtitleColor, fontSize: 10}}
                  renderRow={(rowData, rowID) => renderDropDownList(rowData, rowID)}
                  renderButtonText={(rowData) => renderButtonText(rowData)}
                  renderSeparator={(rowID) => renderSeparator(rowID)}
                  adjustFrame={style => dropdown_adjustFrame(style)}
                  style={{backgroundColor:'transparent', borderColor: 'gray', paddingRight: 10, alignItems: 'flex-end'}}
                  dropdownStyle={{backgroundColor:colors.frameBackground, 
                                  paddingRight: 10, 
                                  paddingLeft: 10, 
                                  paddingRight: 5, 
                                  alignItems: 'flex-end', 
                                  borderWidth: 2,
                                  borderColor: colors.borderColor,
                                  borderRadius: 5,}}
                  // dropdownTextStyle={{color: colors.textSubtitleColor, fontSize: 5, fontWeight:"100"}}
                  onSelect={(idx, value) => setItem(value)}
              />
        </View>
    );
 
 
 }