スクロールビュー内のネイティブの絶対配置要素は表示されません

Question

EMTクラスのクイズアプリのScrollViewで一連の「フラッシュカード」を作成しようとしています。ユーザーはカードをタップして、それを裏返して答えを明らかにする必要があります。 ScrollView内には一連のカードの間に見出しがあります。

カードのアニメーションは、カードを絶対的に配置するthis containerによって実現されます。私はカードが正しく表示されることができません - それは高さが全くなく、まったく表示されない、かすれて見える、またはFlipViewコードを編集して絶対位置を削除した場合、フロントのために高さが倍増します帰ってきた。 index.ios.jsに直接貼り付けることができ

デモコード、：カードが正しく表示されるように取得する方法について

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    ScrollView, 
    TouchableOpacity 
} from 'react-native'; 
import FlipView from 'react-native-flip-view'; 

const data = [ 
    { type: 'default', text: 'some text' }, 
    { type: 'header', text: 'header text'}, 
    { type: 'default', text: 'some more text'} 
]; 

class TextLine extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { isFlipped: false }; 
    } 

    _flip =() => { 
    this.setState({isFlipped: !this.state.isFlipped}); 
    } 

    _renderCard = (text) => { 
    return (
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', padding: 10}}> 
     <TouchableOpacity onPress={this._flip} style={{backgroundColor: 'green', padding: 10}}> 
      <Text style={{fontSize: 16, padding: 10}}>{text}</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 

    render() { 
    if (this.props.type === 'header') { 
     return <Text style={{fontSize: 20, padding: 20, backgroundColor: 'blue'}}>{this.props.text}</Text>; 
    } 
    return (
     <FlipView style={{flex: 1}} 
      front={this._renderCard('Flip')} 
      back={this._renderCard(this.props.text)} 
      isFlipped={this.state.isFlipped} 
      flipAxies="x" 
      /> 
    ); 
    } 
} 

export default class FlipCardTest extends Component { 
    render() { 
    return (
     <View style={{flex: 1, paddingTop: 20}}> 
     <ScrollView contentInset={{top: 0, bottom: 100}}> 
      {data.map((val, idx) => <TextLine key={idx} {...val} />)} 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

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

任意のアイデア？何か助けてくれてありがとう。ここ

Answer 1

ドキュメント、：https://facebook.github.io/react-native/docs/scrollview.html

それは「ScrollViewsが動作するために有界高さを持たなければならない」と言います。それに特定の高さを与えてみてください。あるいは、ウィンドウの高さをとってそれを伝えてみてください。

contentContainerStyle={{flex:1}}をScrollViewに追加すると、問題が解決する場合があります。

どちらの場合でも、ScrollViewの高さを設定するのではなく、親の高さを設定する方がよいでしょう。だから、私は親のビューの高さを与えることを提案します。

このスレッドは役に立ちました：https://github.com/facebook/react-native/issues/3422