は、ここに私がNativeBaseコンポーネントを使用してネイティブアプリを反応させるの小さな問題だ、ネイティブ+ NativeBaseコンテンツ・コンポーネントおよびカルーセル（表示しない）

Question

良い一日を反応させるの

。問題はNativeBaseの<Content />コンポーネント内にあります。私はreact-native-carouselであるgithubの<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をレンダリングScrollView
RNの

を約NativeBaseContentレンダリングし、それはRNのScrollViewをレンダリングします。したがって、別のScrollViewでラップする必要はなく、問題が発生します。

NBのコンテンツを除外してみてください。

NativeBaseの置き換えコンポーネントの詳細 - CheatSheet