React-native scrollview中绝对定位的元素不会显示

Question

我正尝试在 ScrollView 中为我的 EMT class 创建一系列 "flashcards" 测验应用程序。用户应该点击一张卡片，然后将其翻转以显示答案。 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 must have a bounded height in order to work"。尝试给它一个特定的高度，或者取 window 的高度并向下传递。

您可以将 contentContainerStyle={{flex:1}} 添加到 ScrollView，这可能会解决您的问题。

无论哪种情况，最好不要设置 ScrollView 的高度，而是设置父级的高度。所以，我建议给父视图一个高度。

这个帖子可能会有帮助：https://github.com/facebook/react-native/issues/3422

React-native scrollview中绝对定位的元素不会显示

React-native absolutely positioned elements in scrollview will not display

react-native

react-native-scrollview