React Native Action Button - 无法动态添加按钮答案

【问题标题】：React Native Action Button - Unable to Add buttons DynamicallyReact Native Action Button - 无法动态添加按钮
【发布时间】：2020-09-19 16:04:33
【问题描述】：

无法动态添加 ActionButton 项。

我有以下设置 --

<ActionButton>
    <ActionButton.item name={constant_btn1} />
    <ActionButton.item name={constant_btn2} />
</ActionButton>

我想在此列表中添加动态按钮。（列表从后端接收）

我创建了一个返回这些按钮视图的函数。

getDynamicBtns() {
    return dynamicButtonsList.map(item, key) => {(
        return <ActionButton.item name={item.btnName} />;
    )};
}

我也是这样用的-->

<ActionButton>
    <ActionButton.item name={constant_btn1} />
    <ActionButton.item name={constant_btn2} />
    {this.getDynamicBtns()}
</ActionButton>

所以这是渲染我的常量按钮，但不是动态按钮。

编辑 - 我从getDynamicBtns() 函数返回地图，并在render() 中调用函数调用。这只是我编写的一些简化示例代码。

EDIT2 - 为防止混淆，请更改原始问题的代码。

【问题讨论】：

尝试console.log dynamicButtonsList 数组来检查它是否不为空
@zb22 非常感谢！检查后我知道的孩子有点不正确。我会发布一个答案来更好地解释它。

标签： react-native render floating-action-button action-button

【解决方案1】：

您不会在 getDynamicBtns 函数中返回任何内容。您应该返回地图的结果：

getDynamicBtns() {
    return dynamicButtonsList.map(item => <ActionButton.item name={item.btnName} />)
}

【讨论】：

对不起@Ariel Perez。我正在这样做。没有在问题中添加它。将更新。但这并不能解决问题。

【解决方案2】：

我想通了。问题是 .map 函数返回一个对象数组。

所以最终要渲染的元素是一个 React 元素 ActionButton。

无论我的动态列表的大小如何，ActionButton 都只有 3 个孩子。

ActionButton.children: [
    staticButton1,
    staticButton2,
    [dynamicButton1, dynamicButton2, dynamicButton3, ....]
];

作为解决方案，我将它们放入单独的列表中，并找到了列表的联合。然后在<ActionButton>中渲染列表

类似的东西 ->

let listA = [<ActionButton.Item name='staticBtn1.name' />];

let listB = this.getDynamicBtns();

let finalList = _.union(listA, listB);

然后将其渲染为-->

<ActionButton>
    {finalList}
</ActionButton>

【讨论】：