React Native学习笔记(1)--九宫格实现

这篇博客是React Native入门学习笔记,详细介绍了如何使用flexbox实现九宫格布局,包括外层布局、水平三栏布局和上下两栏布局。通过设置flex和flexDirection属性,成功实现了屏幕的平分和子组件的排列。

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

本篇是在学习《React Native入门与实战》这本书时做的笔记,代码基于React Native 0.44实现的,算是对该书中代码的小小更新。

View是一个容器组件,是UI组件中最基本的组件,类似于HTML中的div。
书中的九宫格是一个水平3栏,第二栏和第三栏又分上下两栏。效果如下图:

这里写图片描述

1.外层布局

不用想,我们首先创建一个根布局,并在里面添加水平3栏:

export default class demo01 extends Component {
  render() {
    return(
        <View>
            <View></View>
            <View></View>
            <View></View>
        </View>
    );
  }
}

2.flexbox水平三栏布局

我们使用flexbox实现水平布局并且平分屏幕宽度。这时候就需要借助于样式表了。

styles = StyleSheet.create({
  container: {
    flex:1,
    height: 84,
    borderRadius: 5,
    flexDirection: 'row'
  },
  item: {
    flex:1,
    height: 80
  }
});

这里有两个样式比较重要,即:flex和flexDirection,flexbox默认的是纵向布局,即flexDirection默认为column。为了实现3个View水平布局,我们需要将为flexDirection的值设置为row,样式flex表示权重,即:当flexDirection值为row时,将平分宽度到每一个子View上。下面是为布局添加样式:

export default class demo01 extends Component {
  render() {
    return(
        <View style={styles.container}>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
        </View>
    );
  }
}

3.上下两栏布局

有了上面的水平布局,纵向布局当然也难不倒你,在实现上下两栏布局时,我们需要引入新的组件-Text,用于显示文字。

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

具体代码如下:

export default class demo01 extends Component {
  render() {
    return(
      <View style={styles1.flex}>
        <View style={styles1.container}>
          <View style={[styles1.item, styles1.center]}>
            <Text>酒店</Text>
          </View>
          <View style={[styles1.item, styles1.lineLeftRight]}>
            <View style={[styles1.center, styles1.flex, styles1.lineCenter]}>
              <Text>海外酒店</Text>
            </View>
            <View style={[styles1.center, styles1.flex]}>
              <Text>特惠酒店</Text>
            </View>
          </View>
          <View style={styles1.item}>
            <View style={[styles1.center, styles1.flex, styles1.lineCenter]}>
              <Text style={styles1.font}>团购</Text>
            </View>
            <View style={[styles1.center, styles1.flex]}>
              <Text style={styles1.font}>客栈.公寓</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

styles1 = StyleSheet.create({
  container: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    height: 84,
    borderRadius: 5,
    padding: 2,
    flexDirection: 'row',
    backgroundColor: '#FF0067'
  },
  item: {
    flex:1,
    height: 80,
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  flex: {
    flex:1
  },
  font: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold'
  },
  lineLeftRight: {
    borderLeftWidth: 1/PixelRatio.get(),
    borderRightWidth: 1/PixelRatio.get(),
    borderColor: '#fff'
  },
  lineCenter: {
    borderBottomWidth: 1/PixelRatio.get(),
    borderColor: '#fff'
  }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值