对象数组数据源的react-native modal dropdown问题
对象数组数据源的react-native modal dropdown问题
提问于 2021-07-06 15:50:19
我终于找到了一个似乎适合我需要的下拉菜单，但我在使用该工具时遇到了一些问题。
我的dropdata是一个数组ob对象，其中有标签和值对。当我试图使用它作为我的dropdown的源代码时，我必须使用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;Stack Overflow用户
回答已采纳
发布于 2021-07-08 15:18:07
我已经找到了这个问题的解决方案
配置每个项目的样式只能在一个地方完成，我有两次，一次是在渲染函数中，一次是作为道具"dropdownStyle“。事实证明，这两个是互相困扰的：
下面是我的工作代码：
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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68266570
复制相关文章
相似问题
腾讯云开发者
