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>
    * */
    
  • 相关阅读:
    处理接口返回script标签对
    跨域问题总结
    CordMirror 在线代码编辑器
    解决IOS移动端 new Date 为 Invalid Date bug
    大屏数据可视化
    Xcode清理缓存
    ArrayMap和HashMap区别
    javacript总结
    css总结
    html总结
  • 原文地址:https://www.cnblogs.com/zxh-iOS/p/8963425.html
Copyright © 2011-2022 走看看