在我的 React Native 应用程序中，我想实现 Accordion来自本地基地。不幸的是，似乎只能添加一个string作为dataArray中的内容。
现在我想在这个 Accordion 中渲染一个具有多重选择的组件，而不仅仅是文本。但我绝对无法让这个工作。
这是我的代码。
Accordion .tsx:
imports ...
type Props = {};
interface ArrayContent {
title: string;
content: any;
}
export default class Accordion extends Component<Props> {
// PickerInput is the component that should be rendered inside content of dataArray
renderPickerInput = () => {
return <PickerInput></PickerInput>;
};
dataArray = [
{
title: 'GENERAL',
content: this.renderPickerInput(), // render component here, but it seems that it takes only string
},
];
renderHeader(item: ArrayContent, expanded: boolean) {
return (
<View>
<Text>{item.title}</Text>
{expanded ? (
<Icon name="arrow-dropup" />
) : (
<Icon name="arrow-dropdown" />
)}
</View>
);
}
renderContent(item: ArrayContent) {
return (
<Text>
{item.content}
</Text>
);
}
render() {
return (
<Accordion
dataArray={this.dataArray}
renderHeader={this.renderHeader}
renderContent={this.renderContent}
/>
);
}
}
...以及组件 PickerInput.tsx:
imports ...
const choices = [
{
id: '1',
name: 'Eric',
},
{
id: '2',
name: 'Kyle',
},
{
id: '3',
name: 'Kenny',
},
{
id: '4',
name: 'Stan',
},
];
function PickerInput() {
const [items, setItems] = useState(choices);
const toggleSelect = item => {
setItems(
items.map(element => {
if (item === element) {
element.selected = !element.selected;
}
return element;
}),
);
};
const clearSelection = () => {
setItems(
items.map(i => {
i.selected = false;
return i;
}),
);
};
const onPress = item => {
toggleSelect(item);
};
const renderItem = item => {
return (
<View>
<ListItem
onPress={() => onPress(item)}
key={item.id}>
<Body>
<Text>{item.name}</Text>
</Body>
</ListItem>
</View>
);
};
return (
<Container>
<List>
{items.map(item => {
return renderItem(item);
})}
</List>
</Container>
);
}
export default PickerInput;
您知道这是否可能吗？如果没有，除了 Accordion 之外，我还能做什么来实现内部带有选取器的可折叠组件？
最佳答案
您使用 Text 包装了自定义组件。尝试将其删除。
renderContent(item: ArrayContent) {
return item.content;
}
关于react-native - NativeBase : render component inside accordion，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60788651/