FlexDirection: "row" not working реагирует-native

Atif Javed спросил: 13 июня 2018 в 08:03 в: reactjs

Я разрабатываю приложение, основанное на реакции. Один из экранов приложений содержит список альбомов. Я разделил каждый контейнер альбома на компоненты, которые являются Card и CardSection.

Карта может содержать много карточных разделов. CardSection будет содержать изображение и 2 заголовка текста. Проблема, с которой я столкнулась, заключается в позиционировании содержимого в CardSection, поскольку flexDirection:'row' не работает.

Вот 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;

Вот 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;

В результате изображение, помещенное влево и в правой части изображения, будет содержать 2 заголовка текста и их flexDirection будет column


2 ответа

Есть решение
Noitidart ответил: 14 июня 2018 в 01:40

<View styles={styles.containerStyle}> у вас есть опечатка, это styles, prop должен быть style.

Atif Javed ответил: 14 июня 2018 в 08:49
Спасибо за ваш ответ, но он не работал. Вот скриншот: prnt.sc/k3w89c
Atif Javed ответил: 14 июня 2018 в 08:59
Проблема, насколько мне кажется, находится в CardSection.js. FlexDirection: "column" останется столбцом, так как это относится к заголовкам текста. FlexDirection: 'row' в CardSection.js не работает. containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' }
Noitidart ответил: 14 июня 2018 в 01:40
@AtifJaved просмотреть править
Atif Javed ответил: 14 июня 2018 в 04:26
О, мой плохой. Это проблема. Он работает, спасибо большое
akshay gore ответил: 14 июня 2018 в 07:48

используйте

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

вместо

headerContentStyle: {
     flexDirection: 'column',
     justifyContent: 'space-around'
}
Atif Javed ответил: 14 июня 2018 в 08:49
Спасибо за ваш ответ, но он не работал. Вот скриншот: prnt.sc/k3w89c
Atif Javed ответил: 14 июня 2018 в 09:00
Проблема, насколько мне кажется, находится в CardSection.js. FlexDirection: "column" останется столбцом, так как это относится к заголовкам текста. FlexDirection: 'row' в CardSection.js не работает. containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' }