ReactNative 中 ListView實現GridView效果

阿新 • • 發佈：2019-01-30

在RN中ListVIew擁有ScrollView的所有屬性，所以可以吧ListView當成是ScrollView的一種延伸，在RN中雖然不存在父子類，不過我覺的可以把 ListView當成ScrollView的子類來看。
所以改變ListView的排列方式其實就是改變lIstView的主軸的方向。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

var shareData = require('./shareData.json').data;

var GridView = React.createClass({

    getDefaultProps(){
        return{
            // ..ListView.propTypes
        }
    },

    getInitialState(){

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

        return {
            dataSource:ds.cloneWithRows(shareData)
        }
    },


    render(){
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this 
.renderRow}
                contentContainerStyle={styles.listStyle}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
            />
        )
    },

//    返回Item試圖
    renderRow(rowData,sectionId,rowId,hItemId){
        return(
            <TouchableOpacity
                style={styles.itemViewStyle}
                onPress={() => {AlertIOS.alert(rowId)}}
            >
                <View style={styles.itemViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.itemIconStyle}/>
                    <Text style={styles.itemTitleStyle}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }
})

const styles = StyleSheet.create({
    listStyle:{
        flexDirection:'row', //改變ListView的主軸方向
        flexWrap:'wrap', //換行
    },
    itemViewStyle:{
        alignItems:'center', //這裡要注意，如果每個Item都在外層套了一個 Touchable的時候，一定要設定Touchable的寬高
        width: width / 3,
        height:100
    },
    itemIconStyle:{
        width:60,
        height:60
    },
    itemTitleStyle:{
        marginTop:8
    }
});

module.exports = GridView;

ReactNative 中 ListView實現GridView效果

在RN中ListVIew擁有ScrollView的所有屬性，所以可以吧ListView當成是ScrollView的一種延伸，在RN中雖然不存在父子類，不過我覺的可以把 ListView當成Scr

tomcat，很多時候，可以在服務server.xml中可以實現一些效果

apache pre server link base cat 實現 photo access 一、--日誌 <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"

Xamarin.Forms 中ListView 修改選中效果

eve -c 修改 core ase 之一 back llc orm 在Xamarin.Forms中ListView是非常常用的控件之一，ListView有一個默認的選中效果，顏色和自己的App很不搭，怎麽辦呢？ 1. 在很多時候，ListView在使用中不需要選中，更多情

Android中ListView、GridView的通用適配封裝簡化程式碼

轉載請註明出處：http://blog.csdn.net/u013038616/article/details/50733935 ListView和GridView是我們平時經常用來展示集合資料，每次都要為每種列表建一個專門的適配，雖然建立介面卡灰常簡單，但是每次都會有很多類似的程式碼，作

Xamarin.Forms 中ListView實現到底載入更多

Xamarin.Forms 中ListView實現到底載入更多在移動應用開發中，為了更好的使用者體驗，ListView控制元件的分頁效果通常是利用ListView到底載入來實現。在Xamarin.Forms中ListView如何實現到底載入呢？通過利用ListView的ItemAppearing來

Android中Listview實現點贊功能

最近這段時間一直在看Android，利用Listview去實現點贊功能基本思路：進入介面–》獲取資料–》在Listview中顯示–》通過map集合（position,boolean）儲存每一行是否被點選–》利用實體類去儲存相應的物件–》 g

帶滑動條的導航欄(中)---jQuery實現滑動效果

前言本節利用jQuery實現最終的滑動效果。文件示例程式碼下面有下載連結。網頁程式碼 navigator2.html <!DOCTYPE html> <html> <head> <meta charset="u

RecyclerView實現 gridview效果！

主介面程式碼 /** * @author * @Date 2016年8月29日 * @describe 主頁面*/ public class InternetAccessLogFragment extends BaseFragment { private Vi

Android中ListView實現展示列表資料

1、在activity_main.xml中新增一個ListView <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://sc

Android中ListView實現多級分組顯示的高效實現

前言所謂多級分組，就是類似windows登錄檔那樣的一層一層可以展開的效果，類似於這樣：本文要講的，偏資料結構，只會給出核心程式碼，並不準備寫出完整實現，目的是給出一個清晰的思路，看懂了以後，介面邏

安卓中如何實現倒計時效果

在做註冊時候，使用到了手機號註冊，這個時候需要接收驗證碼，點選獲取驗證碼按鈕後，需要等待一段時間後才能再次點選，這個時候就需要一個帶倒計時的按鈕。 // 自定義倒計時 class TimeCount extends CountDownTimer { public

Java泛型應用之打造Android中ListView和GridView萬能介面卡【CommonAdapter】--超簡潔寫法

在android中使用最多的就是ListView，GridView，用到這兩個控制元件那麼肯定要用到介面卡，那就是定義一個類繼承BaseAdapter，讓後覆寫它裡面的getCount()

CSS3中輕鬆實現漸變效果

關鍵詞:CSS3漸變效果漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用圖片來實現，CSS3將會輕鬆實現網頁漸變效果。要得上面的線性漸變效果，我們這樣去定義CSS3樣式： background-image: -moz-linear-gradient

Android中ListView實現圖文並列並且自定義分割線（完善仿微信APP）

昨天的（今天凌晨）的博文《Android中Fragment和ViewPager那點事兒》中，我們通過使用Fragment和ViewPager模仿實現了微信的佈局框架。今天我們來通過使用ListView實現其中聯絡人一欄的基本檢視，效果如下：要實現上圖的效果，我們要用到兩

ReactNative——UI6.ListView實現帶標題的多列列表

Android中ListView下拉重新整理上拉載入更多效果實現

在Android開發中，下拉重新整理和上拉載入更多在很多app中都會有用到，下面就是具體的實現的方法。首先，我們自定義一個RefreshListView來繼承與ListView，下面是程式碼： package com.example.downrefresh; import

使用RecyclerView實現GridView和ListView混排的效果

　　　單位在做股票相關的app，美工切出一個圖，是一個GridView和ListView混排的效果圖，而且在滾動的時候，還要實現相關類別名有推動的效果，如下圖：　　　　　　錄製的效果不是很好，因為csdn只能上傳２Ｍ，所以點選的效果沒有實現。下面會下載的地址。可以下載看

Android 混排效果之 ScrollView 巢狀 RecyclerView 巢狀gridview 實現listview 巢狀gridview 效果

RecyclerView 出現以後很受大家歡迎漂亮流暢的列表簡單的操作可以幫我們完成很多的列表但是有一種listview 巢狀gridview 的效果目前還是需要巢狀才能完成現在就簡單說一下我的思路本人的需求是例如手機淘寶頁本人使用老套的實現模

android中listview的item點選切換實現效果（選擇器selector）

public class V2_Adapter_TarentoCreateActivity_OverSea_City extends BaseAdapter{private V2_TarentoCreateActivity_OverSea_Place v2_TarentoCreateActivity_Over

在Android中實現陰影效果

sta 技術 wid 語言 mat floating 大表 ado sch 在Android L推出後，Google提出了全新的設計語言：材質設計。其中很重要的一點就是陰影效果的使用，你可以為每一個View設置一個elevation值，相當於除了x、y之外的z值，z值決定

ReactNative 中 ListView實現GridView效果

相關推薦