参考 Facebook 为 NavigatorIOS 提供的示例代码,我创建了一个简单的应用程序,它应该显示一个带有根视图的导航栏。NavigatorIOS 已包含在文件 App.js 中,根视图已在文件 SearchCompnent.js 中定义。
发生在我身上的问题是,当 SearchComponent 作为 initialRoute 组件链接到 NavigatorIOS 时,会引发错误:Element type is invalid: expected a string or a class/function.... 同时,如果我只是在 App 中包含 SearchComponent .js 它加载页面。我被这个问题困扰了一个多星期,没有得到任何解决方案。以下是代码:
应用程序.js
import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text, View, StyleSheet } from 'react-native';
import SearchComponent from './src/components/SearchComponent';
export default class App extends React.Component {
render() {
return (
<NavigatorIOS style={styles.container} initialRoute = {{title: 'Search Property', component: SearchComponent }} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#111111'
},
});
SearchComponent.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default class SearchComponent extends Component {
render() {
return (
<View style={styles.main}>
<Text style={styles.title}>Search For Github User</Text>
</View>
)
}
}
const styles = StyleSheet.create({
main: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#2a8ab7'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center'
}
});