Question

我正在尝试运行一个博览会项目Collapsible Header with TabView，在此链接中它可以正常工作。

但是当我将代码复制并粘贴到我自己的expo项目中时，它给了我一个错误。

Invariant Violation: Element type is invalid: expected a string or a class/function. Check the render method of App

我唯一更改的是将class TabView更改为class App，但这给了我这个错误。

此外，如果我要构建本机代码项目而不是expo。我将如何运行此代码？因为有import {Constants } from expo在react-native run-ios

中不起作用

import * as React from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  ImageBackground,
  Animated,
  Text
} from 'react-native';
import { Constants } from 'expo';
import { TabViewAnimated, TabBar } from 'react-native-tab-view'; // Version can be specified in package.json
import ContactsList from './components/ContactsList';

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

const HEADER_HEIGHT = 240;
const COLLAPSED_HEIGHT = 52 + Constants.statusBarHeight;
const SCROLLABLE_HEIGHT = HEADER_HEIGHT - COLLAPSED_HEIGHT;

export default class TabView extends React.Component {
  constructor(props: Props) {
     super(props);

     this.state = {
       index: 0,
       routes: [
         { key: '1', title: 'First' },
         { key: '2', title: 'Second' },
         { key: '3', title: 'Third' },
       ],
       scroll: new Animated.Value(0),
     };
   }

   _handleIndexChange = index => {
     this.setState({ index });
   };

   _renderHeader = props => {
     const translateY = this.state.scroll.interpolate({
       inputRange: [0, SCROLLABLE_HEIGHT],
       outputRange: [0, -SCROLLABLE_HEIGHT],
       extrapolate: 'clamp',
     });

     return (
       <Animated.View style={[styles.header, { transform: [{ translateY }] }]}>
         <ImageBackground
           source={{ uri: 'https://picsum.photos/900' }}
           style={styles.cover}>
           <View style={styles.overlay} />
           <TabBar {...props} style={styles.tabbar} />
         </ImageBackground>
       </Animated.View>
     );
   };

   _renderScene = () => {
     return (
       <ContactsList
         scrollEventThrottle={1}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: this.state.scroll } } }],
           { useNativeDriver: true }
         )}
         contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
       />
     );
   };

  render() {
    return (
     <TabViewAnimated
       style={styles.container}
       navigationState={this.state}
       renderScene={this._renderScene}
       renderHeader={this._renderHeader}
       onIndexChange={this._handleIndexChange}
       initialLayout={initialLayout}
     />
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 overlay: {
   flex: 1,
   backgroundColor: 'rgba(0, 0, 0, .32)',
 },
 cover: {
   height: HEADER_HEIGHT,
 },
 header: {
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   zIndex: 1,
 },
 tabbar: {
   backgroundColor: 'rgba(0, 0, 0, .32)',
   elevation: 0,
   shadowOpacity: 0,
 },
});

Answer 1

我明白了！我不得不将TabViewAnimated替换为TabView。

react-native无法打开EXPO项目

1 个答案: