Добрый день,
Вот небольшая проблема с моим приложением 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.
Заранее спасибо.