React Native：包含 headers 和 collapsible-expandable 项的 ListView

Question

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

一切都很好，没问题。但我无法 react-native-vector-icons 在 React Native 版本 0.27 中使用 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，因为它需要反应本机 v0.20 或更高版本。

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

非常感谢任何帮助，提前致谢。

Answer 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
            });
        }

    }

React Native：包含 headers 和 collapsible-expandable 项的 ListView

React Native: ListView with section headers and collapsible-expandable items

javascript

ios

reactjs

react-native

react-native-listview