Question

尝试在React Native中创建基本组件并收到错误。

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

我只是想创建一个将成为图片的组件，但会对其进行一些调整。

<ActivityImage>组件是我尝试制作的内容：

import React from 'react';
import { Dimensions, Image } from 'react-native';
let windowWidth = Dimensions.get('window').width

export default class ActivityImage extends React.Component {
    render() {
      return (
        <Image source={source} style={{width: windowWidth}} />
      )
    }
  }

应用代码：

import React from 'react';
import {
  Dimensions,
  Image,
  Text,
  TouchableHighlight,
  StatusBar,
  View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import styles from './assets/styles';

import { Slide1, Slide2, Slide3, Slide4 } from './assets/content';
import { ActivityImage } from './components/activityImage';    
    class HomeScreen extends React.Component {
      constructor(props) {
        super(props);
        this.state = {

        };
      }

      static navigationOptions = {
          header: null,
        }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
      <StatusBar hidden />
        <ActivityImage source={require('./assets/images/0.jpg')} />
      </View>
    );
  }
}

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}

Answer 1

我假设您导入错过的组件，例如<View>，<StatusBar>和... 您应该使用props获取组件的来源。你应该为你的图像定义一个高度，在这个例子中我把它设为200.这样你的组件将是这样的：

export default class ActivityImage extends React.Component {
  render () {
    return (
      <Image source={this.props.source} style={{width: windowWidth, height: 200}}/>
    )
  }
}

创建组件，获取元素类型无效

1 个答案: