陣營本地+ 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