滚动视图中的 React-native 绝对定位元素不会显示答案

【问题标题】：React-native absolutely positioned elements in scrollview will not display滚动视图中的 React-native 绝对定位元素不会显示
【发布时间】：2017-03-14 06:29:28
【问题描述】：

我正在尝试在 ScrollView 中为我的 EMT 课程的测验应用程序创建一系列“抽认卡”。用户应该点击一张卡片，让它翻转以显示答案。 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);

关于如何让卡片正确显示的任何想法？感谢您提供的任何帮助。

【问题讨论】：

标签： react-native react-native-scrollview

【解决方案1】：

文档，这里：https://facebook.github.io/react-native/docs/scrollview.html

它说“ScrollViews 必须有一个有界的高度才能工作”。尝试给它一个特定的高度，或者取窗口的高度并将其向下传递。

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

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

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

【讨论】：