1

我有一个简单的反应原生应用程序（v 0.27）。我有一个列表视图（包含部分和项目）。我正在使用 react-native-accordion ( https://github.com/naoufal/react-native-accordion ) 使项目可折叠。

一切都很好，没有问题。但我无法在 react native 版本 0.27 中让 react-native-vector-icons 与 TabbarIOS 一起使用（默认情况下，图标大小为 30。当你更改它时，它不起作用。给出错误），但它与 react native 版本一起工作正常0.14.1（像这个https://github.com/catalinmiron/react-native-dribbble-app）

为了能够将 react-native-vector-icons 与 tabbarios 一起使用，我恢复到 react-native v0.14.1，它工作正常，但我不能再使用 react-native-accordion，因为它需要 react-native v0.20 或更高。

所以我想问一下，是否有带有部分数据和可折叠项目的列表视图，而不使用 react-native-accordion ？

任何帮助都非常感谢，在此先感谢。

4

1 回答 1

1

几天前，我陷入了同样的问题。但现在这段代码对我有用

您的列表视图代码

<ListView
    style={styles.container}
    dataSource={this.state.dataSource}
    renderRow={(data) =>
        <View style={{ flex: 1, flexDirection: "column" }}>
            <View style={{ flex: 1, flexDirection: "column" }}>
                <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", marginBottom: 0 }}>
                    <Text style={{ fontSize: 16, color: "#fff", padding: 5, textAlign: "center", width: 220, paddingLeft: 40, paddingRight: 40, borderStyle: "solid", borderRadius: 100, borderColor: "#fff", borderWidth: 1 }}>
                        {data.name}
                    </Text>
                </View>
                <TouchableHighlight
                    onPress={() => this.updateIndex(data._id)}>
                    <View style={{ alignItems: "center", justifyContent: "center", marginBottom: 5 }}>

                        {this.state.categoryIndex == data._id &&
                            <Text style={{ color: "#fff" }}>
                                <IonicIcons name="ios-arrow-up" style={{ fontSize: 20, marginTop: 10, padding: 0 }} />
                                <Text> Less</Text>
                            </Text>
                        }

                        {this.state.categoryIndex != data._id &&
                            <Text style={{ color: "#fff" }}>
                                <IonicIcons name="ios-arrow-down" style={{ fontSize: 20, marginTop: 10, padding: 0 }} />
                                <Text> More</Text>
                            </Text>
                        }
                    </View>
                </TouchableHighlight>
            </View>
            {this._renderCancel(data)}
        </View>
    }

您需要调用 updateIndex() 函数。这个函数只会更新需要打开子视图的状态ID

this.state.categoryIndex == data._id 将打开 ListView，如果 this.state.categoryIndex != data._id 它将关闭您的子 ListView

我的 updateIndex() 函数看起来像

 updateIndex(index) {
        if (this.state.showSubcategory && this.state.categoryIndex == index) {
            this.setState({
                showSubcategory: !this.state.showSubcategory,
                categoryIndex: false
            });
        } else {
            this.setState({
                showSubcategory: true,
                categoryIndex: index
            });
        }

    }
于 2017-04-07T13:53:30.690 回答