1.6 ListView

自己做項目中的重點知識，不是教程，如果學習的話可以拿來參考。源代碼[地址][3]
[3]: https://github.com/BaiPeiHe/react-native

簡介

一個列表組件，在不同的布局或試圖中顯示一組數據項。
官網地址

基本

實現簡單的功能，將數據渲染到視圖上。

import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    TouchableOpacity,
}from 'react-native';

import NavigationBar from './NavigationBar'
// 本地數據
var data={
    "result":[
        {
            "email":"email00",
            "fullName":"張三00"
        },
        {
            "email":"email01",
            "fullName":"張三01"
        },
    ]
};
export default class ListViewTest extends Component{

    constructor(props){
        super(props);
        // 定義數據源
        const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
        this.state={
            dataSource:ds.cloneWithRows(data.result),
        }
    }
    // 渲染每一個 Cell
    renderRow(item){
        return <View style={styles.row}>
            <Text style={styles.tips}>{item.fullName}</Text>
            <Text style={styles.tips}>{item.email}</Text>
        </View>
    }
    // 渲染界面
    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'ListViewTest'}
                />
                <ListView
                    // 指定數據源
                    dataSource={this.state.dataSource}
                    // 渲染 Cell
                    renderRow={(item)=>this.renderRow(item)}
                ></ListView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    text:{
        fontSize:18
    },
    tips:{
        fontSize:18
    },
    row:{
        height:50
    },
});

分割線


    // 渲染分割線
    renderSeparator(sectionID,rowID,adjacentRowHightlighted){
        return <View key={rowID} style={styles.line}></View>
    }
    render(){
        return(
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item)=>this.renderRow(item)}
                   // 調用渲染分割線方法
                    renderSeparator={()=>this.renderSeparator()}
                ></ListView>
            </View>
        )
    }
    
    
const styles = StyleSheet.create({
    // 分割線的樣式
    line:{
        height:1,
        backgroundColor:'black'
    },
});

腳視圖

在腳視圖上渲染一張圖片。
注意：<Image/>標簽在渲染網絡圖片時，要指定寬、高。

    // 渲染腳視圖
    renderFooter(){
        // <Image/>網絡圖片要指定寬、高。
        return <Image style={{width:400,height:100}} source={{url:'[圖片鏈接][2]'}}></Image>
    }
    render(){
        return(
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item)=>this.renderRow(item)}
                    renderSeparator={()=>this.renderSeparator()}
                    // 調用渲染腳視圖方法
                    renderFooter={()=>this.renderFooter()}
                ></ListView>
            </View>
        )
    }

點擊方法

點擊每一行，顯示當前的標題。
顯示信息使用到了組件：react-native-easy-toast
安裝組件：npm i react-native-easy-toast --save

// 導入頭文件
// DURATION 是常量，表示顯示的時長
import Toast,{DURATION} from 'react-native-easy-toast'

    renderRow(item){
        return <View style={styles.row}>
            <TouchableOpacity
            // 點擊方法
            onPress={()=>{
                this.toast.show('你單擊了：'+item.fullName,DURATION.LENGTH_LONG);
            }}
            >
                <Text style={styles.tips}>{item.fullName}</Text>
                <Text style={styles.tips}>{item.email}</Text>
            </TouchableOpacity>
        </View>
    }
    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'ListViewTest'}
                />
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item)=>this.renderRow(item)}
                    renderSeparator={()=>this.renderSeparator()}
                    renderFooter={()=>this.renderFooter()}
                ></ListView>
                // 渲染 Toast，并賦值給 this.toast
                <Toast ref={toast=>{this.toast=toast}}/>
            </View>
        )
    }

下拉刷新

實現下拉刷新功能
使用 RefreshControl

// 導入頭文件
RefreshControl,

// 添加 state 參數
        this.state={
            dataSource:ds.cloneWithRows(data.result),
            isLoading:true,
        }
        this.onLoad();

    // 刷新觸發方法
    onLoad(){
        // 延時兩秒
        setTimeout(()=>{
            // 結束刷新
            this.setState({
                isLoading:false
            })
        },2000);

    }

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'ListViewTest'}
                />
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item)=>this.renderRow(item)}
                   renderSeparator={()=>this.renderSeparator()}
                    renderFooter={()=>this.renderFooter()}
                    // 下拉刷新
                    refreshControl={<RefreshControl
                        // 是否刷新
                        refreshing={this.state.isLoading}
                        // 刷新時觸發的方法
                        onRefresh={()=>this.onLoad()}
                    />}

                ></ListView>

                <Toast ref={toast=>{this.toast=toast}}/>
            </View>
        )
    }

完整代碼

/**
 * Created by baihe on 2017/4/13.
 */

import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    RefreshControl,
    TouchableOpacity,
}from 'react-native';

import NavigationBar from './NavigationBar'
// DURATION 是常量，表示顯示的時長
import Toast,{DURATION} from 'react-native-easy-toast'

var data={
    "result":[
        {
            "email":"email00",
            "fullName":"張三00"
        },
        {
            "email":"email01",
            "fullName":"張三01"
        },
        {
            "email":"email02",
            "fullName":"張三02"
        },
        {
            "email":"email03",
            "fullName":"張三03"
        },
        {
            "email":"email04",
            "fullName":"張三04"
        },
        {
            "email":"email05",
            "fullName":"張三05"
        },
        {
            "email":"email06",
            "fullName":"張三06"
        },
        {
            "email":"email07",
            "fullName":"張三07"
        },
        {
            "email":"email08",
            "fullName":"張三08"
        },
        {
            "email":"email09",
            "fullName":"張三09"
        },
        {
            "email":"email10",
            "fullName":"張三10"
        },
        {
            "email":"email11",
            "fullName":"張三11"
        },
    ]
};
export default class ListViewTest extends Component{

    constructor(props){
        super(props);

        const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});

        this.state={
            dataSource:ds.cloneWithRows(data.result),
            isLoading:true,
        }
        this.onLoad();

    }

    renderRow(item){
        return <View style={styles.row}>
            <TouchableOpacity
            onPress={()=>{
                this.toast.show('你單擊了：'+item.fullName,DURATION.LENGTH_LONG);
            }}
            >
                <Text style={styles.tips}>{item.fullName}</Text>
                <Text style={styles.tips}>{item.email}</Text>
            </TouchableOpacity>
        </View>
    }
    // 渲染分割線
    renderSeparator(sectionID,rowID,adjacentRowHightlighted){
        return <View key={rowID} style={styles.line}></View>
    }
    renderFooter(){
        return <Image style={{width:400,height:100}} source={{url:'https://images.gr-assets.com/hostedimages/1406479536ra/10555627.gif'}}></Image>
    }
    // 加載數據
    onLoad(){
        // 延時兩秒
        setTimeout(()=>{
            // 設置狀態，這時就不會顯示刷新了
            this.setState({
                isLoading:false
            })
        },2000);

    }

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'ListViewTest'}
                />
                <ListView
                    dataSource={this.state.dataSource}
                    // 每個 Cell
                    renderRow={(item)=>this.renderRow(item)}
                    // 分割線
                    renderSeparator={()=>this.renderSeparator()}
                    // 腳視圖
                    renderFooter={()=>this.renderFooter()}
                    //
                    refreshControl={<RefreshControl
                        refreshing={this.state.isLoading}
                        onRefresh={()=>this.onLoad()}
                    />}

                ></ListView>

                <Toast ref={toast=>{this.toast=toast}}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    text:{
        fontSize:18
    },
    tips:{
        fontSize:18
    },
    row:{
        height:50
    },
    line:{
        height:1,
        backgroundColor:'black'
    },
});
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容