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

尝试在React Native中创建基本组件并获取错误。创建组件，获取元素类型无效

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

我只是试图创建一个组件，该组件将是一个图像，但有一些调整它的大小。

的<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/> 
    ); 
    } 
}

来源

2017-08-13 Chris Chong

你正在导入它吗？ – Li357

可能不是，但我无法弄清楚是什么问题。该代码是正确的教程。 –

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

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

来源

2017-08-13 04:37:50

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

回答

相关问题