ListViewのスティッキーヘッダーは、AndroidのrenderSectionHeaderプロパティを使用しても機能しません

Question

反応のネイティブなこのような素晴らしいテクノロジーに感謝します:)最近、コンポーネントをテストしています。セクションヘッダ。おそらく、コンテンツの上部に貼られるべきヘッダーは、次のものに押されて動かない。 iOSの同等物はちょうど良いthoを働かせます。

私は窓口で反応ネイティブ0.29.2を使用しています。64bit反応ネイティブcli 1.0.0です。 23.0.1アンドロイドSDK

また、私が試すことができるサンプルApp here（view rnplay.org）を入れました。そのアプリのバージョンは0.24.1 thoですが、まだ正しく動作していないようです。 docsによれば

：

renderSectionHeader機能

（sectionData、セクションID）=>レンダリング

提供される場合、スティッキーヘッダは、このセクションのためにレンダリングされます。スティッキー の動作は、画面上部に到達するまで セクションの上部にあるコンテンツとともにスクロールすることを意味します。その時点で、 が次のセクションで画面から押し出されるまでスティックします。 ヘッダ。

しかし、実際には私のために働いていないようです。ここで私はまた、あなたがテストすることができますサンプルアプリケーションhereを置くコード

class ListViewTest extends Component { 

    renderListRowView(rowData) { 
    const { state, label, alarm = false } = rowData; 

    return (
     <View style={styles.row}> 
     <Text style={styles.rowText}>{label}</Text> 
     </View> 
    ); 
    } 

    renderSectionHeader(data, sectionId) { 
    return (
     <View style={styles.subheader}> 
     <Text style={styles.subheaderText}>{sectionId}</Text> 
     </View> 
    ); 
    } 

    getSource() { 
    return [{ 
     name: 'Category 1', 
     todos: [{ 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'checked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }] 
    }, { 
     name: 'Categor 2', 
     todos: [{ 
     state: 'checked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'checked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'checked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }, { 
     state: 'unchecked', 
     label: 'Eat Food' 
     }] 
    }, { 
     name: 'Category 3', 
     todos: [{ 
     state: 'unchecked', 
     label: 'Go with the flow' 
     }, { 
     state: 'checked', 
     label: 'Go with the flow' 
     }, { 
     state: 'unchecked', 
     label: 'Go with the flow' 
     }, { 
     state: 'unchecked', 
     label: 'Go with the flow' 
     }, { 
     state: 'unchecked', 
     label: 'Go with the flow' 
     }] 
    }]; 
    } 

    renderListViewData() { 
    var data = this.getSource(); 
    var sectionIds = []; 

    data.map((list) => { 
     sectionIds.push(list.name); 
     data[list.name] = list.todos; 
    }); 

    return {data, sectionIds}; 
    } 

    render() { 
    var ds = new ListView.DataSource({ 
     sectionHeaderHasChanged: (r1, r2) => r1 !== r2, 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 

    var {data, sectionIds} = this.renderListViewData(); 

    let dataSource = ds.cloneWithRowsAndSections(data, sectionIds); 

    return (
     <View style={{flex: 1}}> 
     <ListView 
      ref="listview" 
      dataSource={dataSource} 
      renderRow={this.renderListRowView} 
      renderSectionHeader={this.renderSectionHeader} 
      automaticallyAdjustContentInsets={false} 
      scrollEnabled={true} 
     /> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('ListViewTest',() => ListViewTest); 

の一部です。そのアプリのバージョンは0.24.1 thoですが、まだ正しく動作していないようです。

本当にありがとうございます。楽しみにしている。ありがとうございました！

Answer 1

3つの引数をすべて指定してcloneWithRowsAndSections APIを完了する必要があります。