初识react-native ListView

写博客只会自己以后能看，留点映象
第一：获取数据源，我这里是自己手动添加一点假数据
var data = {
“result”: [
{
“data1”: “data/puzzle_domain_walker_data.json”,
“title1”: “迷域行者”
},
{
“data1”: “data/shuangqimigong.json”,
“title1”: “双栖迷宫”
},
{
“data1”: “data/langmanchuanshuo.json”,
“title1”: “浪漫传说”
},
{
“data1”: “data/Lily.json”,
“title1”: “Lily”
},
{
“data1”: “data/bodycount_data.json”,
“title1”: “死亡名单”
},
{
“data1”: “data/chaoxiyou.json”,
“title1”: “超西游”
},
{
“data1”: “data/duchuangtianya.json”,
“title1”: “独闯天涯”
},
{
“data1”: “data/kexuezhanshi.json”,
“title1”: “科学战士”
},
{
“data1”: “data/dtcys.json”,
“title1”: “大唐除妖司”
}, {
“data1”: “data/langmanchuanshuo.json”,
“title1”: “浪漫传说”
},
{
“data1”: “data/Lily.json”,
“title1”: “Lily”
},
{
“data1”: “data/bodycount_data.json”,
“title1”: “死亡名单”
},
{
“data1”: “data/chaoxiyou.json”,
“title1”: “超西游”
},
{
“data1”: “data/duchuangtianya.json”,
“title1”: “独闯天涯”
},
{
“data1”: “data/kexuezhanshi.json”,
“title1”: “科学战士”
},
{
“data1”: “data/dtcys.json”,
“title1”: “大唐除妖司”
}
]
} 有需要可以自己下截去，
第二步：导入Listview就不说了，构造方法里面创建DataSource(ds)
rowHasChanged是指数据改变时会刷新

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()
    }

第三步：

<ListView
    dataSource={this.state.dataSource}//指定数据源
    renderRow={(item) => this.renderRow(item)}//指定每页的数据视图
    //下面这名是添加下划线
    renderSeparator={(rowData, sectionID, rowID, highlightRow) => this.renderSeparator(rowData, sectionID, rowID, highlightRow)}
    //添加脚视图
    renderFooter={() => this.renderFooterd()}
    //下拉刷新数据
    refreshControl={<RefreshControl
    refreshing={this.state.isLoading}
    onRefresh={() => this.onLoad()}
    />}
/>

上面三步就大功告成了
下面有几个方法
每个条目的item对应上面的： renderRow={(item) => this.renderRow(item)}

renderRow(item) {
    //取出数据里面的数据
    return <View style={styles.item}>
        <TouchableOpacity//点击事件视图
            onPress={() => {
                this.toast.show('你单击了：' + item.title1, DURATION.LENGTH_SHORT);
            }}
        >
            <Text style={styles.tips}>{item.title1}</Text>
            <Text style={styles.tips}>{item.data1}</Text>
        </TouchableOpacity>
    </View>
}

下面的是添加下划线代码：

renderSeparator(rowData, sectionID, rowID, highlightRow) {
   return <View key={rowID} style={styles.line}></View> 
}

下面的是模拟请求代码

onLoad() {
    setTimeout(() => {
        this.setState({
            isLoading: false,
        })
    }, 2000)
    }

写的这里也就结束了，只是刚刚接触RN也不是特别熟悉

下面是效果图

下面是全部源码：

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl
} from 'react-native'
import NavigationBar from './NavigationBar'
import Toast, {DURATION} from 'react-native-easy-toast'

var data = {
    "result": [
        {
            "data1": "data/puzzle_domain_walker_data.json",
            "title1": "迷域行者"
        },
        {
            "data1": "data/shuangqimigong.json",
            "title1": "双栖迷宫"
        },
        {
            "data1": "data/langmanchuanshuo.json",
            "title1": "浪漫传说"
        },
        {
            "data1": "data/Lily.json",
            "title1": "Lily"
        },
        {
            "data1": "data/bodycount_data.json",
            "title1": "死亡名单"
        },
        {
            "data1": "data/chaoxiyou.json",
            "title1": "超西游"
        },
        {
            "data1": "data/duchuangtianya.json",
            "title1": "独闯天涯"
        },
        {
            "data1": "data/kexuezhanshi.json",
            "title1": "科学战士"
        },
        {
            "data1": "data/dtcys.json",
            "title1": "大唐除妖司"
        }, {
            "data1": "data/langmanchuanshuo.json",
            "title1": "浪漫传说"
        },
        {
            "data1": "data/Lily.json",
            "title1": "Lily"
        },
        {
            "data1": "data/bodycount_data.json",
            "title1": "死亡名单"
        },
        {
            "data1": "data/chaoxiyou.json",
            "title1": "超西游"
        },
        {
            "data1": "data/duchuangtianya.json",
            "title1": "独闯天涯"
        },
        {
            "data1": "data/kexuezhanshi.json",
            "title1": "科学战士"
        },
        {
            "data1": "data/dtcys.json",
            "title1": "大唐除妖司"
        }
    ]
}

export default class ListViewSencond 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.item}>
            <TouchableOpacity
                onPress={() => {
                    this.toast.show('你单击了：' + item.title1, DURATION.LENGTH_SHORT);
                }}
            >
                <Text style={styles.tips}>{item.title1}</Text>
                <Text style={styles.tips}>{item.data1}</Text>
            </TouchableOpacity>
        </View>

    }

    renderSeparator(rowData, sectionID, rowID, highlightRow) {
        return <View key={rowID} style={styles.line}></View>
    }

    renderFooterd() {
        return <Image style={{width: 400, height: 100}}
                      source={{uri: ''}}/>
    }

    onLoad() {
        setTimeout(() => {
            this.setState({
                isLoading: false,
            })
        }, 2000)
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'ListViewSencond'}
                    statusBar={
                        {
                            backgroundColor: '#EE6363',
                        }
                    }
                />

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item) => this.renderRow(item)}
                    renderSeparator={(rowData, sectionID, rowID, highlightRow) => this.renderSeparator(rowData, sectionID, rowID, highlightRow)}
                    renderFooter={() => this.renderFooterd()}
                    refreshControl={<RefreshControl
                        refreshing={this.state.isLoading}
                        onRefresh={() => this.onLoad()}
                    />}
                />
                <Toast ref={toast => {
                    this.toast = toast
                }}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    text: {
        fontSize: 22,
    },
    item: {
        height: 50
    },
    tips: {
        fontSize: 15,
    },
    line: {
        height: 1,
        backgroundColor: '#e1e1e1'
    }
})

结束： RN的路还很长

初识react-native ListView

猜你喜欢