Saya baru bereaksi asli, dan saya menghadapi masalah untuk memposisikan teks saya. Saya ingin memiliki sesuatu seperti ini:

Hi, Daffa
XII RPL

Tapi ini hasil saya:

Hi, Daffa XII RPL

Ini kode saya:

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',
  },
});

Terima kasih telah membaca ini, saya minta maaf jika pertanyaan saya agak bodoh, dan maaf untuk bahasa Inggris saya yang buruk.

2
daffaquraisy 8 Januari 2021, 13:42

3 jawaban

Jawaban Terbaik

Aplikasi Kerja: Camilan pameran

enter image description here

Bungkus komponen Text dalam komponen 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',
  },
});

1
Ketan Ramteke 8 Januari 2021, 10:49

Anda dapat menggunakan {\n} tag ini untuk memutuskan garis

<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>
1
bisma 9 Januari 2021, 12:00

Elemen <View> adalah kolom nilai default tetapi Anda meng-header kelas dengan baris perubahan. Teks pembungkus elemen <View> baru untuk perbaikan Anda.

1
Yunus Emre KAVİ 9 Januari 2021, 14:36