阵营本地+ NativeBase Content组件和传送带（未显示）

Question

好日子，

这里有一个小问题，它采用NativeBase组件我的阵营原生应用。问题出在NativeBase的<Content />组件中。我想使用来自github的<Carousel />组件，它是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', 
    }, 
}) 

我已经尝试了很多东西，造型旋转木马组件，给它一个单独的视图，样式在同一时间，但不幸的是它不起作用。但是，只要我删除NativeBase的<Content />组件，它就可以正常工作。我很确定问题出在NativeBase组件上。

在此先感谢。

Answer 1

关于react-native-carousel

• 呈现Carousel
• Carousel呈现CarouselPager
• 而CarouselPager呈现RN
的 ScrollView

关于NativeBaseContent，它呈现RN的ScrollView。所以包装它在另一个滚动视图是没有必要的，并导致问题。

尝试排除NB的内容。

了解更多关于NativeBase的替换组件 - CheatSheet