React Native：セクションヘッダーと折りたたみ可能な展開可能なアイテムを持つListView

Question

私は単純なアプリケーションをネイティブで作成しています（0.27）。私はリストビューを持っています（セクションとアイテムあり）。私は反応ネイティブアコーディオン（https://github.com/naoufal/react-native-accordion）を使ってアイテムを折りたたみ可能にしていました。

すべて問題なく機能しました。しかし、私は反応するネイティブのベクトルアイコンを反応するネイティブバージョン0.27（アイコンのサイズはデフォルトで30です。あなたがそれを変更すると、それは動作していません。エラーを返します）、TabbarIOSで動作することができませんでした。 0.14.1（このようにhttps://github.com/catalinmiron/react-native-dribbble-app）

反応するネイティブベクターアイコンをタブベースで使用できるようにするには、反応ネイティブv0.14.1に戻しますが、それはうまくいきますが、反応ネイティブは使用できませんこれは、ネイティブv0.20以上の反応が必要なためです。

私は質問したいと思っていましたが、反応のネイティブアコーディオンを使用せずに、セクションデータと折りたたみ可能なアイテムでlistviewを持っていますか？

ご協力いただきありがとうございます。

Answer 1

私は同じ問題を抱えていました。しかし今、このコードでは、仕事は私のためにあなたがupdateIndex（）関数を呼び出す必要が

リストビューのコード

<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> 
    } 

です。この関数は、子ビューを開く必要のある状態IDを更新するだけです。

this.state.categoryIndex == data._idはListViewを開き、this.state.categoryIndex！= data._idの場合、子リストビューを閉じます

マイ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 
      }); 
     } 

    }