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

Question

我正在尝试在 ScrollView 中为我的 EMT 类(class)的测验应用程序创建一系列“抽认卡”。用户应该点击一张卡片，然后将其翻转以显示答案。 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 的高度，而是设置父级的高度。所以，我建议给父 View 一个高度。

此线程可能会有帮助:https://github.com/facebook/react-native/issues/3422