RN 多行换行布局

最新推荐文章于 2021-10-22 10:25:36 发布

Ansel_m

最新推荐文章于 2021-10-22 10:25:36 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： RN

本文链接：https://blog.youkuaiyun.com/majiakun1/article/details/52801898

RN 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在React Native应用中实现多行文本的换行布局，通过示例代码`AppRegistry.registerComponent('TFlex', () => TFlex);`展示具体实现，帮助开发者理解并解决在移动端UI设计中遇到的文本换行问题。" 129428050,10925334,Python大数据自学指南与实践,"['大数据入门', 'Python开发语言', '自学大数据', '数据处理', '大数据框架']

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

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

export default class TFlex extends Component {
  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.sub} >1</Text>
        <Text style={styles.sub} >2</Text>
        <Text style={styles.sub} >3</Text>
        <Text style={styles.sub} >4</Text>
        <Text style={styles.sub} >5</Text>
        <Text style={styles.sub} >6</Text>
        <Text style={styles.sub} >7</Text>
        <Text style={styles.sub} >8</Text>
        <Text style={styles.sub} >9</Text>
        <Text style={styles.sub} >10</Text>
        <Text style={styles.sub} >11</Text>
     </View>
    );
  };
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    flexDirection: "row",
    justifyContent: 'space-around',
    alignItems: 'center',
    flexWrap: "wrap",
    backgroundColor: '#F5FCFF',
  },
  sub: {
    margin: 10,
    width: 50,
    height: 50,
    backgroundColor: "red",
  },
});

AppRegistry.registerComponent('TFlex', () => TFlex);

效果如下：