Компонент React Native + NativeBase Content и карусель (не отображается)

Добрый день,

Вот небольшая проблема с моим приложением React Native, которое использует компоненты NativeBase. Проблема заключается в компоненте <Content /> NativeBase. Я хочу использовать компонент <Carousel /> из github, который называется react-native-carousel.

Код выглядит следующим образом:

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import {
  Container,
  Header,
  Content,
  Title,
  Icon,
  Button,
} from 'native-base';

import Carousel from 'react-native-carousel';

import styles from './src/styles/styles';

export default class iABC extends Component {
  render() {
    return (
      <Container>
        <Header backgroundColor='#ffffff' height={50}>
          <Button transparent>
            <Icon name='md-menu' style={styles.header.icon} />
          </Button>

          <Title style={styles.header.title}>
            iABC
          </Title>

          <Button transparent>
            <Icon name='md-person' style={styles.header.icon} />
          </Button>
        </Header>

        <Content>
          <View style={styles.global.content}>            
            <Carousel width={375}
              hideIndicators={false}
              indicatorColor='#000000'
              indicatorSize={25}
              indicatorSpace={20}
              indicatorAtBottom={true}
              indicatorOffset={250}
              indicatorText='>'
              animate={true}
              delay={2000}
              loop={true}>

              <View style={styles.carousel.page1}>
                <Text>Page 1</Text>
              </View>
              <View style={styles.carousel.page1}>
                <Text>Page 2</Text>
              </View>
              <View style={styles.carousel.page1}>
                <Text>Page 3</Text>
              </View>
            </Carousel>
          </View>          
        </Content>
      </Container>
    );
  }
}

AppRegistry.registerComponent('iABC', () => iABC);

Стиль: carousel.js

'use strict'
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  page1: {
    flex: 1,
    height: 150,
    width: 375,
    backgroundColor: '#cdcdcd',
    justifyContent: 'center',
    alignItems: 'center',
  }
})

Стиль: global.js

'use strict'
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

Я пробовал много вещей, стилизовал компонент карусели, придавал ему отдельный вид, стилизовал оба одновременно, но, к сожалению, это не работает. Однако, пока я удаляю компонент <Content /> из NativeBase, он работает нормально. Я почти уверен, что проблема связана с компонентом NativeBase.

Заранее спасибо.


person Community    schedule 29.12.2016    source источник


Ответы (1)


О react-native-carousel

  • Визуализирует Carousel
  • Carousel визуализирует CarouselPager
  • И CarouselPagerрендерит ScrollView РН

Что касается NativeBase Content, он отображает ScrollView RN. Таким образом, обертывание его в другой ScrollView не является необходимым и вызывает проблемы.

Попробуйте исключить Контент NB.

Узнайте больше о заменяющих компонентах NativeBase — CheatSheet

person Supriya Kalghatgi    schedule 29.12.2016
comment
Спасибо, получил его. Не был уверен в том, что возвращает NB Content, думал, что он просто возвращает компонент View :( Попытка избежать использования компонента NB и использовать другой компонент Carousel из react-native-carousel-component. - person ; 29.12.2016
comment
Я не думаю, что вам нужно избегать всех компонентов NB. Следует избегать только в таких случаях. Вы можете проверить документы NB, они включают подробные сведения обо всех его компонентах. - person Supriya Kalghatgi; 29.12.2016