react native 九宫格

最新推荐文章于 2021-10-30 15:50:12 发布

原创最新推荐文章于 2021-10-30 15:50:12 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用React Native创建一个包含图标和标题的列表视图，并通过触摸反馈实现点击事件响应。文章详细展示了组件构造、数据源设置及样式定义等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    TextInput,
    ListView,
    TouchableOpacity,
    Image,
    ScrollView,
    Text,
    Alert,
    View
} from 'react-native';
//导入数据
import ShareData from ".././shareData.json";

//获取屏幕宽度
let Dimensions = require("Dimensions");
let {width} = Dimensions.get('window');
//常量设置
let cols = 3;
let cellWH =80;
let vMargin = (width-cellWH*cols)/(cols+1);
let hMargin = 30;


export default class App extends Component {

    constructor(props){
        super(props);
        //1.设置数据源
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        //2.设置返回数据
        this.state = {dataSource:ds.cloneWithRows(ShareData.data)};
        thiz = this;
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                contentContainerStyle={styles.listViewStyle}
            />
        );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{thiz._onPress(rowData.title)}}>
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.iconStyle}/>
                    <Text>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    _onPress(e) {

        alert(">>>点击 "+e);
    }

}


const styles = StyleSheet.create({
    listViewStyle:{
        flexDirection:'row',
        flexWrap:'wrap',
    },
    iconStyle:{
        width:50,
        height:50,
    },
    innerViewStyle:{
        width:cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,
        alignItems:'center',
    }
});