web-dev-qa-db-fra.com

React Problème de route du composant de navigation natif

Nouvel utilisateur natif React ici. Je rencontre un problème et je ne sais pas comment procéder. J'ai réussi à faire fonctionner React-Navigation correctement, puis j'ai commencé à recevoir une erreur: "Le composant pour l'itinéraire doit être aa React Component" mais à moins que je manque quelque chose, je crois que le composant Je fais référence est un composant réactif. Voir mon index.Android.js ci-dessous et mon Home.js ci-dessous:

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

enter image description here

Toute aide/réaction très appréciée. Merci!

javascriptandroidreact-native
16
saupton

Je pense que le problème est avec home.js puisque vous ne l'exportez pas. Essaye ça :

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

Ajoutez-les ou ajoutez simplement

 export default Home;

à la fin de home.js fichier

36
A-J-A

Pour toute autre personne venant ici, vous pourriez recevoir l'erreur "Le composant pour l'itinéraire doit être une erreur React Component") car vous n'avez pas d'export par défaut, ce qui était le cas pour moi.

export HomeScreen extends React.Component {
 ...

contre

export default HomeScreen extends React.Component {
 ...

J'espère que cela aide quelqu'un!

4
Elon Zito
const MyNavigator = createStackNavigator({
  RouteNameOne: {
    screen: () => <HomeScreen/>
  },
  RouteNameTwo: {
    screen: () => <NewScreen/>
  }
}, {
  initialRouteName: 'RouteNameOne'
});

Ça va marcher.

2
Ayush Raichand

Dans mon cas, mettre ce bloc de code dans home.js a résolu le problème

 static navigationOptions = {
    navigationOptions: {
      title: "scren title",
    }
  };
0
shesh nath