React Native学习笔记(1)--九宫格实现
发布时间:2020-12-15 07:18:49 所属栏目:百科 来源:网络整理
导读:本篇是在学习《React Native入门与实战》这本书时做的笔记,代码基于React Native 0.44实现的,算是对该书中代码的小小更新。 View是一个容器组件,是UI组件中最基本的组件,类似于HTML中的div。 书中的九宫格是一个水平3栏,第二栏和第三栏又分上下两栏。效
View是一个容器组件,是UI组件中最基本的组件,类似于HTML中的div。 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.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,padding: 2,flexDirection: 'row',backgroundColor: '#FF0067' },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' } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |