1

反応ネイティブ（v 0.27）のシンプルなアプリがあります。リストビューがあります（セクションとアイテムを含む）。アイテムを折りたたみ可能にするために、react-native-accordion ( https://github.com/naoufal/react-native-accordion ) を使用していました。

すべて問題なく、問題ありませんでした。しかし、反応ネイティブ バージョン 0.27 の TabbarIOS で動作する react-native-vector-icons を取得できませんでした (アイコン サイズはデフォルトで 30 です。変更すると、動作しません。エラーが発生します)。しかし、反応ネイティブ バージョンでは正常に動作しています。 0.14.1 (このようなhttps://github.com/catalinmiron/react-native-dribbble-app )

react-native-vector-icons を tabbarios で使用できるようにするには、react-native v0.14.1 に戻します。問題なく動作していますが、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 に答える