React Doğal Gezinme Bileşen Rota Sorun

Question

Yeni, yerel kullanıcı buraya tepki. Bir sorunla karşılaşıyorum ve nasıl devam edeceğimi bilmiyorum. Tepki-navigasyonun düzgün bir şekilde çalışmasını sağladı ve bir hata almaya başladı: "Güzergahın bileşeni bir React Component olmalıdır", fakat bir şey kaçırmadığım sürece, referansını kullandığım bileşenin bir tepki bileşeni olduğunu . Aşağıda aşağıda benim index.android.js ve benim Home.js bakınız:

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

See error image here

Herhangi bir yardım/çok takdir işaretçileri tepki gösteriyorlar. Teşekkür ederim!

Answer 1

Dışa aktarmadığınız için, sorunun home.js ile olduğunu düşünüyorum. Bu deneyin:

export default class Home extends Component { ... } 
^^^^^^^^^^^^^^ 

olanlar ekleyin ya da sadece