首页 > 其他 > 详细

RN个人笔记SectionListView

时间:2018-04-27 17:46:28      阅读:227      评论:0      收藏:0      [点我收藏+]

技术分享图片

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>
* */

 

RN个人笔记SectionListView

原文:https://www.cnblogs.com/zxh-iOS/p/8963425.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!