React-native absolut positionierte Elemente in Scrollview wird nicht angezeigt

Question

Ich versuche, eine Reihe von "Flashcards" in einem ScrollView für eine Quiz-App für meine EMT-Klasse zu erstellen. Ein Benutzer sollte auf eine Karte tippen und sie umdrehen lassen, um die Antwort zu enthüllen. Innerhalb der ScrollView gibt es Überschriften zwischen Kartensätzen.

Die Kartenanimation wird über this container erreicht, wodurch die Karte absolut positioniert wird. Ich kann die Karte nicht richtig erscheinen lassen - sie hat entweder keine Höhe und erscheint überhaupt nicht, erscheint gequetscht, oder, wenn ich die absolute Positionierung durch Bearbeiten des FlipView-Codes entfernt habe, wird die Höhe verdoppelt, um Platz für die Vorderseite zu schaffen und zurück.

Demo-Code, der direkt in index.ios.js eingefügt werden kann:

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); 

Alle Ideen, wie die Karten zu bekommen richtig angezeigt werden? Danke für jede Hilfe, die Sie geben können.

Answer 1

Docs, hier: https://facebook.github.io/react-native/docs/scrollview.html

Er sagt: "ScrollViews eine beschränkte Höhe, um zu arbeiten haben müssen". Versuchen Sie, ihm eine bestimmte Höhe zu geben, oder nehmen Sie die Höhe des Fensters und geben Sie es nach unten.

Sie könnten hinzufügen, contentContainerStyle={{flex:1}} der ScrollView und das könnte Ihr Problem lösen.

In jedem Fall wäre es besser, nicht die Höhe der ScrollView, sondern eines übergeordneten Elements festzulegen. Also würde ich vorschlagen, dem Elternteil eine Höhe zu geben.

Dieser Thread könnte Ihnen dabei helfen: https://github.com/facebook/react-native/issues/3422