web-dev-qa-db-ja.com

Reactネイティブナビゲーションコンポーネントルートの問題

新しいネイティブユーザーの反応はこちら。問題が発生しているので、どうすればよいかわかりません。反応ナビゲーションを適切に実行することができ、エラーが発生し始めました：「ルートのコンポーネントはaa React Component」でなければなりませんが、何かを逃さない限り、コンポーネントは私はisリアクションコンポーネントを参照しています。下の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>
        );
    }
}

enter image description here

ヘルプ/リアクションポインターは大歓迎です。ありがとうございました！

javascriptandroidreact-native
16
saupton

問題はhome.jsにあると思います。エクスポートしていないからです。これを試して ：

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

それらを追加するか、単に追加します

 export default Home;

home.jsファイルの最後

36
A-J-A

ここに来る他の人には、デフォルトのエクスポートがないため、「ルートのコンポーネントはReactコンポーネントである必要があります」というエラーが表示される可能性があります。

export HomeScreen extends React.Component {
 ...

対

export default HomeScreen extends React.Component {
 ...

これが誰かを助けることを願っています！

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

それが動作します。

2
Ayush Raichand

私の場合、このコードブロックをhome.jsに入れると問題が解決しました

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