React Native 如何在 flex 方向行内使用 like <br>

Posted 2023-03-31

【中文标题】React Native 如何在 flex 方向行内使用 like <br>

【英文标题】：React Native how to use like <br> inside flex direction row

【发布时间】：2021-01-08 10:42:51

【问题描述】：

我是原生反应新手，我在定位文本时遇到了问题。 我想要这样的东西：

Hi, Daffa
XII RPL

但这是我的结果：

Hi, Daffa XII RPL

这是我的代码：

import React from 'react';
import View, StyleSheet, Text, Image from 'react-native';

export default function Header() 
  return (
    <View style=styles.header>
      <Image style=styles.img source=require('../assets/me.png') />
      <Text style=styles.text>Hi, Daffa Quraisy</Text>
      <Text style=styles.kelas>XII RPL</Text>
    </View>
  );


const styles = StyleSheet.create(
  header: 
    height: 200,
    backgroundColor: '#327fe3',
    flexDirection: 'row',
    alignItems: 'center',
  ,
  img: 
    height: 50,
    width: 50,
    marginLeft: 20,
    padding: 0,
  ,
  text: 
    color: 'white',
    marginLeft: 18,
    fontWeight: 'bold',
  ,
  kelas: 
    color: 'white',
    fontSize: 12,
    marginLeft: 18,
    flexWrap: 'nowrap',
  ,
);

感谢阅读本文，如果我的问题有点愚蠢，我很抱歉，对于我的英语不好感到抱歉。

【参考方案1】：

工作应用：Expo snack

将Text 组件包装在View 组件中：

import React from 'react';
import  View, StyleSheet, Text, Image  from 'react-native';

export default function Header() 
  return (
    <View style=styles.header>
      <Image style=styles.img source=require('./assets/snack-icon.png') />
      <View>
        <Text style=styles.text>Hi, Daffa Quraisy</Text>
        <Text style=styles.kelas>XII RPL</Text>
      </View>
    </View>
  );


const styles = StyleSheet.create(
  header: 
    height: 200,
    backgroundColor: '#327fe3',
    flexDirection: 'row',
    alignItems: 'center',
  ,
  img: 
    height: 50,
    width: 50,
    marginLeft: 20,
    padding: 0,
  ,
  text: 
    color: 'white',
    marginLeft: 18,
    fontWeight: 'bold',
  ,
  kelas: 
    color: 'white',
    fontSize: 12,
    marginLeft: 18,
    flexWrap: 'nowrap',
  ,
);

【讨论】：

谢谢大哥，完美运行，不知道view标签和div类似，哈哈，谢谢告知！

View 是 div 在 react native 中的孪生兄弟 :)

【参考方案2】：

你可以使用\n这个标签来换行

<View style=styles.header>
  <Image style=styles.img source=require('../assets/me.png') />
  <Text style=styles.text>Hi, Daffa Quraisy `\n` <Text style=styles.kelas>
   XII RPL</Text>
 </Text>
</View>

【参考方案3】：

<View> 元素是默认值列，但您的标题类具有更改行。用于修复的新 <View> 元素包装文本。