1

我正在尝试在 ScrollView 中为我的 EMT 课程的测验应用程序创建一系列“抽认卡”。用户应该点击一张卡片，让它翻转以显示答案。ScrollView 内的卡片组之间有标题。

卡片动画是通过这个容器实现的，它对卡片进行绝对定位。我无法让卡片正确显示 - 它要么没有高度，根本不显示，要么看起来被压扁，或者，如果我通过编辑 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);

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

4

1 回答 1

6

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

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

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

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

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

于 2017-03-14T07:48:46.967 回答