Question

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

一切都很好没问题。但我无法使用TabbarIOS的反应本机版本0.27（默认情况下图标大小为30。当你更改它时，它不起作用。给出错误），但它＆＃39; s与本机版本0.14.1（如此https://github.com/catalinmiron/react-native-dribbble-app）

一样正常工作

能够将反应原生矢量图标与tabbarios一起使用，我恢复到本地反应v0.14.1，它工作正常，但我不能再使用react-native-accordion了，因为它要求反应原生v0.20或更高。

所以我想问一下，无论如何都有listview的分段数据和可折叠的项目，而不使用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：ListView包含节标题和可折叠扩展项

1 个答案: