【问题标题】:Need Help React Native Image Header Scroll View需要帮助 React Native Image Header Scroll View
【发布时间】:2021-04-09 11:21:52
【问题描述】:

我想为我的项目添加一个图像标题滚动视图。我使用了下面的代码,这给了我错误 “元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义。” 我尽我所能,但我没有找到解决办法。我也完全不明白为什么会出现这个错误。

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  StatusBar,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {Header} from 'react-navigation-stack';

import HeaderImageScrollView, {
  TriggeringView,
} from 'react-native-image-header-scroll-view';

const MIN_HEIGHT = Header.HEIGHT;
const MAX_HEIGHT = 250;

const styles = StyleSheet.create({

  title: {
    fontSize: 20,
  },

  section: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#cccccc',
    backgroundColor: 'white',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },



  titleContainer: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
  },

  navTitleView: {
    height: MIN_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 16,
    opacity: 0,
  },
  navTitle: {
    color: 'white',
    fontSize: 18,
    backgroundColor: 'transparent',
  },
  sectionLarge: {
    height: 600,
  },
});

class TvShow extends Component {
  constructor() {
    super();
    this.state = {showNavTitle: false};
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content" />
        <HeaderImageScrollView
          maxHeight={MAX_HEIGHT}
          minHeight={MIN_HEIGHT}
          maxOverlayOpacity={0.6}
          minOverlayOpacity={0.3}
          fadeOutForeground
          renderHeader={() => (
            <Text>Hiiii</Text>
          )}
          renderFixedForeground={() => (
            <Animatable.View
              style={styles.navTitleView}
              ref={navTitleView => {
                this.navTitleView = navTitleView;
              }}>
              <Text style={styles.navTitle}>
                Hii
              </Text>
            </Animatable.View>
          )}
          renderForeground={() => (
            <View style={styles.titleContainer}>
              <Text>Hii</Text>
            </View>
          )}>
          <TriggeringView
            style={styles.section}
            onHide={() => this.navTitleView.fadeInUp(200)}
            onDisplay={() => this.navTitleView.fadeOut(100)}>
            <Text style={styles.title}>
              <Text>Hii</Text>, ( 1998)
            </Text>
          </TriggeringView>
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Overview</Text>
            <Text>Hii</Text>
          </View>
          <View style={[styles.section, styles.sectionLarge]}>

          </View>
        </HeaderImageScrollView>
      </View>
    );
  }
}

export default TvShow;

【问题讨论】:

    标签: reactjs react-native


    【解决方案1】:

    是库问题,使用0.10.3版本 “react-native-image-header-scroll-view”:“0.10.3”

    【讨论】:

    • 非常感谢您的回答
    猜你喜欢
    • 2023-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-02
    • 1970-01-01
    • 2020-02-16
    • 2011-10-17
    • 1970-01-01
    相关资源
    最近更新 更多