ReactNative: 使用View组件创建九宫格

Posted xyq-208910

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ReactNative: 使用View组件创建九宫格相关的知识,希望对你有一定的参考价值。

一、简言

初学RN,一切皆新。现在使用最基本的组件View容器组件,创建一个九宫格。这里会通过给组件设置伸缩性布局完成布局样式。代码如下:

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

//导入React和React-Native框架的系统组件 import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, View } from ‘react-native‘; //创建应用组件 export default class ReactNativeDemo extends Component { render() { return (
<View style={styles.flex}> <View style={[styles.flex,styles.container]}> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> <View style={styles.item}></View> </View> </View> ); } } //创建样式表
const styles = StyleSheet.create({ flex: { flex: 1 // 比例权重为1,会填充整体屏幕 }, container: { marginTop: 25, marginBottom: 5, marginLeft: 5, marginRight: 5, backgroundColor: ‘red‘, // 背景色为红色 flexDirection: ‘row‘, // View组件默认为纵向布局,这个改为横向布局 flexWrap: ‘wrap‘, // 宽度不足,可以换行 justifyContent: ‘space-between‘, // 等比例间距排列 borderRadius: 5, // 设置圆角 padding: 5 }, item: { width: 340/3, height: 340/3, backgroundColor: ‘green‘, borderColor: ‘white‘, borderWidth: 1, marginBottom: 5 } });
//注册应用组件 AppRegistry.registerComponent(‘ReactNativeDemo‘, () => ReactNativeDemo);

 

二、演示

技术图片

以上是关于ReactNative: 使用View组件创建九宫格的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative进阶(二十四):react-native-scrollable-tab-view标签导航器组件详解

ReactNative 桥接原生原子组件

reactnative this.refs 怎么返回值

ScrollView 不起作用(仅在 android 上)reactnative

React Native - RCT_EXPORT_VIEW_PROPERTY 在视图初始化方法中为零

React Native 源码分析——Native View创建流程