[英]React native navigation - the component for the route must by react component
[英]React Native Navigation Component Route Issue
新的反應原生用戶在這里。 我遇到了一個問題,我不知道該怎么辦。 我能夠正常運行react-navigation然后開始收到一個錯誤:“路由的組件必須是一個React組件”,但除非我遺漏了一些東西,我相信我引用的組件是一個反應組件。 請參閱下面的index.android.js和我的Home.js:
//index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {
TabNavigator,
StackNavigator
} from 'react-navigation';
import Home from './app/components/Home/Home';
import Search from './app/components/Search/Search';
export default class demoApp extends Component {
render() {
return (
<SimpleNavigation/>
);
}
}
export const SimpleNavigation = StackNavigator({
Home: {
screen: Home,
header: { visible: false },
navigationOptions: {
title: 'Home',
header: null
},
},
Search: {
screen: Search,
navigationOptions: {
title: 'test'
},
},
},{});
//Home.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableHighlight
} from 'react-native';
class Home extends Component {
constructor(props){
super(props);
this.state = {zipCode: ''}
}
navigate = (zipCode) => {
this.props.navigation.navigate('Search', zipCode);
}
render() {
return (
<View style={styles.container}>
<View style={[styles.boxContainer, styles.boxOne]}>
<Image style={styles.logo} source {require('../../images/Logo.png')} />
<Text style={styles.title}>An application to do things</Text>
<TextInput
style={styles.textInput}
placeholder='Enter a Zip Code'
onChangeText={(zipCode) => this.setState({zipCode})}
>
</TextInput>
</View>
<View style={[styles.boxContainer, styles.boxTwo]}>
<TouchableHighlight onPress={() => this.navigate(this.state.zipCode)}>
<Text style={styles.searchBox}>
Search
</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
任何幫助/反應指針非常感謝。 謝謝!
我認為問題在於home.js,因為你沒有導出它。 試試這個 :
export default class Home extends Component { ... }
^^^^^^^^^^^^^^
添加或添加
export default Home;
在home.js
文件的末尾
對於其他任何人來到這里,你可能會收到“路由組件必須是一個React組件”錯誤,因為你沒有默認導出,這就是我的情況。
export HomeScreen extends React.Component {
...
VS
export default HomeScreen extends React.Component {
...
希望這有助於某人!
const MyNavigator = createStackNavigator({
RouteNameOne: {
screen: () => <HomeScreen/>
},
RouteNameTwo: {
screen: () => <NewScreen/>
}
}, {
initialRouteName: 'RouteNameOne'
});
它會工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.