反应原生导航组件路径问题 [英] React Native Navigation Component Route Issue

问题描述

新的反应原生用户在这里。我遇到了一个问题，我不知道该怎么办。我能够正常运行react-navigation，然后开始收到一个错误：路由的组件必须是一个React组件，但除非我遗漏了什么，我相信我引用的组件是反应成分。请参阅下面的index.android.js和我的Home.js：

New react native user here. I'm running into an issue and I am not sure how to proceed. I was able to get react-navigation running properly and then began receiving an error: "The component for route must be a a React Component" but unless I'm missing something, I believe that the component I am referencing is a react component. See my index.android.js below and my Home.js below:

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

任何帮助/反应指针都非常感激。谢谢！

Any help/react pointers much appreciated. Thank you!

推荐答案

我认为问题出在 home.js ，因为你没有出口它。试试这个：

I think the problem is with home.js since you aren't exporting it. Try this :

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

添加或只添加

 export default Home; 

在 home.js 的末尾文件

这篇关于反应原生导航组件路径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！