RN个人笔记SectionListView

Posted 2020-11-01 zhangxianhongx

import React, { Component } from \'react\';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    SectionList,
    Navigatorios
} from \'react-native\';



export default class My extends Component {
    componentWillMount(){

    }
    setctionHeader = ({section})=>{
        return (
            <View style={{backgroundColor:\'#f0f0f0\'}}>
                {/*{section.key}*/}
                <Text style={{backgroundColor:\'#f0f0f0\',color:\'#00bfff\'}}></Text>
            </View>
        );
    }
    renderItemComponent = ({item})=>{
        console.log(item)
        return (
            <View style={{flexDirection:\'row\',height:50,alignItems: "center",backgroundColor:"white"}}>
                <Text style={{marginLeft:10}}>{item.title}</Text>

                <Image style={{marginRight:20}} source={require(\'./Images/right.png\')} />
            </View>
        );
        }


    render(){
    var sections = [];
    var data1 = [];
    data1.push({title:"立即发布",key:"1"})
    data1.push({title:"我的发布",key:"2"})
    var data2 = [];
    data2.push({title:"关于我们",key:"3"})
    data2.push({title:"意见反馈",key:"4"})
    var data3 = [];
    data3.push({title:"退出登录",key:"5"})

    sections.push({key:"one",data:data1})
    sections.push({key:"two",data:data2})
    sections.push({key:"three",data:data3})
       return (

    <View style={styles.container}>
     <SectionList style={styles.sectionListStyle}
        renderItem={this.renderItemComponent}
        renderSectionHeader={this.setctionHeader}
        sections={sections}
        />
    </View>
       );
    }

}
var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:"#00cadf"
    },
    rowText:{
        height:40,
    },
    sectionListStyle: {
        flex:1,
    }
});
/*
_gotoNextPage() {
    this.props.navigator.push({
            name: \'NextPage\',
            component: NextPage
        });
    }

 <View style={styles.container}>

               <TouchableOpacity style={styles.nextBtn} onPress={this._gotoNextPage.bind(this)}>
                   <Text style={styles.nextText}>进入下一页</Text>
               </TouchableOpacity>
           </View>
* */