React Native九宫格制作练习flex 上下左右居中

React Native九宫格组件实现

最新推荐文章于 2022-09-29 10:52:22 发布

原创最新推荐文章于 2022-09-29 10:52:22 发布 · 474 阅读

1 ·

CC 4.0 BY-SA版权

RN 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用React Native创建的九宫格组件，通过循环生成九个带有数字的方块，展示了如何利用Flexbox布局实现响应式设计。每个方块包含一个数字，从0到8排列，形成一个简单的九宫格界面。

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

export default class Detail extends Component{
    render(){
        return(
            <View style={styles.vStyle}>
                {this.nine()}
            </View>
        );
    }

    nine(){
        let grad = [];
        for(let i = 0;i<9;i++){
            let g = <View key={i} style={styles.gStyle}>
                <Text style={styles.gText}>{i}</Text>
            </View>;
            grad.push(g);
        }
        return grad;
    }
}

const styles = StyleSheet.create({
    vStyle:{
        flexDirection:'row',
        flexWrap:'wrap'
    },
    gStyle:{
        width:120,
        height:120,
        marginLeft:18,
        marginTop:10,
        backgroundColor:'#137',
        justifyContent:'center',
        alignItems:'center'
    },
    gText:{
        color:'#fff',
        fontSize:20
    }
});