ListView 끈적한 헤더가 안드로이드에서 renderSectionHeader 속성을 사용하는 경우에도 작동하지 않습니다.

Question

반응 - 네이티브 그런 훌륭한 기술에 감사드립니다 :) 어쨌든, 저는 최근에 일부 구성 요소를 테스트 해 왔으며 목록을 렌더링 할 때 Android의 ListView 구성 요소에서 버그를 발견했습니다. 섹션 헤더. 콘텐츠 상단에 붙어있는 머리글은 다음 문자로 이동하여 작동하지 않습니다. iOS 제품은 잘 작동합니다.

Windows 7 64bit에 react-native-cli 1.0.0으로 반응식 네이티브 0.29.2을 사용하고 있습니다. 23.0.1 android SDK.

또한 테스트 할 수있는 샘플 here (view rnplay.org)을 넣습니다. 해당 응용 프로그램의 버전은 0.24.1 tho이지만 제대로 작동하지 않는 것 같습니다. docs 따르면

: 제공 한 경우

렌더링 가능한

(sectionData, sectionID는) => 스티커 헤더 섹션이 렌더링

renderSectionHeader 기능. 끈적 끈적한 동작은 화면의 상단하는 것이 가기 스틱은 다음 섹션 으로 화면을 밀어 것까지 포인트에 도달 할 때까지가 섹션의 맨 위에있는 내용으로 이동된다는 것을 의미합니다 머리글.

하지만 실제로 저에게는 효과가없는 것 같습니다. 여기에 나는 또한 테스트 할 수있는 샘플 앱 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를 완료해야 작동합니다.