zoukankan      html  css  js  c++  java
  • RN个人笔记SectionListView

    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>
    * */
    
  • 相关阅读:
    linux命令大全
    IP协议
    TCP、IP、ARP协议之间的工作关系
    程序出现问题后
    HTTP(超文本传输协议)
    多线程
    syslog.conf文件
    logger命令
    gdb
    二、数据的存储结构
  • 原文地址:https://www.cnblogs.com/zxh-iOS/p/8963425.html
Copyright © 2011-2022 走看看