ScrollView React Native Horizontal не работает

Я разрабатываю приложение с RN 0.59.8. Я пытаюсь создать прокручиваемый вид по горизонтали с помощью ScrollView. Вот основа моего кода (извините, я не могу поделиться более подробной информацией):

import React, { Component, Fragment } from 'react';
import {
  ScrollView,
} from 'react-native';
import {
  Container,
  Content,
} from 'native-base';
import { Grid, Row } from 'react-native-easy-grid';

import ChildComponent from './ChildComponent';

class MyComponent extends Component {
  render() {
    const {
      data,
    } = this.props;

    return (
      <Container>
        <Content>
          <Grid>
            <Row>
              <ScrollView
                horizontal
                contentContainerStyle={{
                  flex: 1, flexGrow: 1, flexDirection: 'row',
                }}
              >
                {
                  data.map((item, index) => {
                    const order = index;

                    return (
                      <Fragment key={order}>
                        {
                          <ChildComponent />
                        }
                      </Fragment>
                    );
                  })
                }
              </ScrollView>
            </Row>
          </Grid>
        </Content>
      </Container>
    );
  }
}

export default MyComponent;

Текущее поведение:

  1. если contentContainerStyle={{ flex: 1, flexGrow: 1, flexDirection: 'row' }}, вторые данные не отображаются
  2. если contentContainerStyle={{ flex: 1, flexGrow: 1, flexDirection: 'column' }}, вторые данные отображаются вертикально
  3. если contentContainerStyle={{ flexDirection: 'row' }}, вторые данные не отображаются и содержимое шире ширины экрана

Мое возражение:

  1. Я хочу сделать его прокручиваемым по горизонтали
  2. Каждые данные будут соответствовать ширине экрана

Любая помощь будет очень полезна. Спасибо!!!


react-native scrollview horizontalscrollview
person Akza    schedule 23.06.2019    source источник
comment
так что вы просто хотите сделать каждый дочерний элемент этого scrollView шириной экрана? если это так, вы можете изменить способ отображения дочерних элементов, добавить к ним стиль и установить их ширину на «100%».   -  person mahmoudafer    schedule 23.06.2019
comment
@mAhMoUdDaFeR Я пробовал это, но проблема по-прежнему в том, что вторые данные нигде не отображаются, если я установил для flexDirection значение «строка», но все данные отображаются вертикально, если я установил для flexDirection значение «столбец».   -  person Akza    schedule 23.06.2019

Ответы (1)


arrow_upward
4
arrow_downward

Прямо из документов React Native, чтобы дочерние элементы представления прокрутки располагались горизонтально в строке, а не вертикально в столбце, единственная поддержка, которую вам нужно использовать, это horizontal.

<ScrollView horizontal>
  <Child/>
</ScrollView>

Я создал закуску, чтобы показать вам, @abranhe/stackoverflow-56721203:

чтобы он соответствовал ширине экрана, поиграйте с вашим компонентом и:

import { Dimensions } from 'react-native';

Dimensions.get('width').width

Исходный код демо:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView } from 'react-native';
import data from './data';

export default class App extends Component {
  renderCity(city) {
    return (
      <View style={styles.cardContainer}>
        <View style={styles.card}>
          <Image source={{ uri: city.img }} style={styles.image} />
          <Text style={styles.title}>{city.title}</Text>
        </View>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal>
          {data.map(city => {
            return this.renderCity(city);
          })}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    marginTop: 30,
  },
  title: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 10,
    marginTop: 10,
  },
  cardContainer: {
    justifyContent: 'center',
  },
  card: {
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
    borderRadius: 10,
    width: 220,
  },
});

Имейте в виду

Некоторые компоненты пользовательского интерфейса из native-base имеют абсолютные значения, вы можете изменить переменные темы, чтобы они соответствовали вашим потребностям.

Если вы не хотите показывать индикатор прокрутки, вы можете установить значение false для Свойство ScrollView showsHorizontalScrollIndicator.

person abranhe    schedule 23.06.2019
comment
после осмотра проблема заключается в стилизации дочернего компонента. Но ваш ответ выше помог мне решить мою проблему. Большое спасибо за ваши полные ответы. Хорошего дня! - person Akza; 23.06.2019