flexDirection: baris tidak berfungsi reaksi-asli

Saya sedang mengembangkan aplikasi reaksi-asli. Salah satu layar aplikasi berisi daftar album. Saya telah membagi setiap wadah album menjadi beberapa komponen yaitu Card dan CardSection.

Sebuah Kartu dapat berisi banyak Bagian Kartu. CardSection akan berisi gambar dan 2 judul Teks. Masalah yang saya hadapi adalah pemosisian konten di CardSection karena flexDirection:'row' tidak berfungsi.

Ini CardSection.js

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

import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {

// destructing the props
const {title, artist, thumbnail_image} = album;
return (
    <Card>
        <CardSection>

            <View style={styles.thumbnailContainerStyle}>
                <Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
            </View>

            <View style={styles.headerContentStyle} >
                <Text style={styles.headerTextStyle}>{title}</Text>
                <Text>{artist}</Text>
            </View>

        </CardSection>
    </Card>
);
};

const styles = {
  headerContentStyle: {
     flexDirection: 'column',
     justifyContent: 'space-around'
},
headerTextStyle:{
    fontSize:18
},
thumbnailStyle: {
    height: 50,
    width: 50
},
thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    marginRight: 10
}
};

export default AlbumDetail;

Ini CardSection.js

import React from 'react';

import {View} from 'react-native';


const CardSection = (props) => {
return (
    <View styles={styles.containerStyle}>
        {props.children}
    </View>
);

};

const styles = {
 containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: "row",
    borderColor: '#ddd',
    position: 'relative'
}
};
export default CardSection;

Hasilnya adalah Gambar yang diletakkan di sebelah kiri dan kanan gambar akan ada 2 Judul Teks dan FlexDirectionnya adalah column

ExpectedResult Masalah


person Atif Javed    schedule 07.07.2018    source sumber
comment
Cara terbaik untuk melakukan debug adalah menginstal react-devtools dan memilih showspector sehingga ini akan membantu Anda menyelesaikan masalah ini. Bagi saya semuanya terlihat baik.   -  person Ashwin Mothilal    schedule 08.07.2018
comment
Ya, semuanya baik-baik saja, tapi saya tidak tahu mengapa tidak berfungsi. Btw Terima kasih, saya akan menginstalnya.   -  person Atif Javed    schedule 08.07.2018


Jawaban (4)


<View styles={styles.containerStyle}> Anda salah ketik, itu styles, propnya harus style.

person Noitidart    schedule 07.07.2018
comment
Terima kasih atas jawaban Anda, tetapi tidak berhasil. Berikut tangkapan layarnya: prnt.sc/k3w89c - person Atif Javed; 08.07.2018
comment
Masalahnya, sejauh ini menurut saya ada di CardSection.js. flexDirection: 'column' akan tetap menjadi kolom karena ini untuk judul teks. flexDirection: 'row' di CardSection.js tidak berfungsi. containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' } - person Atif Javed; 08.07.2018
comment
Tepat kawan.... tepat... seolah-olah Anda melihat kode saya... - person Naveen R; 23.08.2020
comment
Ini juga masalahku T__T - person Sam Lahm; 05.04.2021

Gunakan ini

headerContentStyle: {
     flexDirection: 'row',
     justifyContent: 'space-around'
}

alih-alih

headerContentStyle: {
     flexDirection: 'column',
     justifyContent: 'space-around'
}
person akshay gore    schedule 08.07.2018
comment
Terima kasih atas jawaban Anda, tetapi tidak berhasil. Berikut tangkapan layarnya: prnt.sc/k3w89c - person Atif Javed; 08.07.2018
comment
Masalahnya, sejauh ini menurut saya ada di CardSection.js. flexDirection: 'column' akan tetap menjadi kolom karena ini untuk judul teks. flexDirection: 'row' di CardSection.js tidak berfungsi. containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' } - person Atif Javed; 08.07.2018

Anda harus menggunakan props card containerStyle di file CardSection.js. di sana Anda harus menggunakan flexDirection :'row' . Semoga ini berhasil.

person Savinder Singh    schedule 10.01.2019

Saya memiliki masalah serupa ketika flexDirection: 'row' tidak berfungsi di salah satu komponen yang saya impor di App.js.

Penyebabnya adalah alignItems: 'center' di stylesheet untuk wadah utama di file App.js saya.

Saya harap ini membantu seseorang.

person Codebender    schedule 19.01.2019