Question

我试图制作一系列＆＃34;抽认卡＆＃34;在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);

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

Answer 1

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

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

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

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

此主题可能有所帮助：https://github.com/facebook/react-native/issues/3422

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

1 个答案: