Выровняйте 2 карточки в одной строке с динамическим содержимым, используя flex в React Native Expo

Я использую карты в проекте React Native Expo. Карты создаются и размещаются динамически, но я хочу, чтобы 2 карты отображались в одной строке.

Требуемый код

let data = [
{ id: "1", title: "First", desc: "Some desc", time: "4pm" },
{ id: "2", title: "Second", desc: "Some second desc", time: "5pm" },
           ];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: data,
        };
    }    

    render() {
        return (
            <View style = {{display: "flex", flex: 1}}>
                    
                <View style = {{}}>
                    <FlatList
                        data = {this.state.products}
                        renderItem = {({ item }) => (
                            <TouchableOpacity>
                                <Card
                                    style = {{
                                        margin: 5,
                                    }}
                                >
                                    <View style = {styles.checkCards}>
                                        <Text>{item.title}</Text>
                                    </View>
                                </Card>
                            </TouchableOpacity>
                        )}
                    />
                </View>
            </View>
           )}}

javascript react-native flexbox expo

11.12.2020 19:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

638

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте дать FlatList numColumns = {2}

let data = [
  { id: '1', title: 'First', desc: 'Some desc', time: '4pm' },
  { id: '2', title: 'Second', desc: 'Some second desc', time: '5pm' },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: data,
    };
  }

  render() {
    return (
      <View style = {{ display: 'flex', flex: 1, marginTop: 24 }}>
        <View style = {{}}>
          <FlatList
          numColumns = {2}
            data = {this.state.products}
            renderItem = {({ item }) => (
              <TouchableOpacity style = {{ flex: 1, }}>
                <Card
                  style = {{
                    margin: 5,
                    padding: 10,
                  }}>
                  <View style = {{}}>
                    <Text>{item.title}</Text>
                  </View>
                </Card>
              </TouchableOpacity>
            )}
          />
        </View>
      </View>
    );
  }
}

Рабочий пример: Expo Snack

Чтобы узнать больше, numcolumns

11.12.2020 19:48