2017-03-04 3 views
6

現在、React Nativeと新しいReact Navigationで作業しています。そこで私はtutorial for nesting navigatorsに従うことをしようとしているが、エラーが常にある:リアクションナビゲータをネストしているナビゲータ - 'Home'は画面を宣言する必要があります

Route 'Home' should declare a screen. For example: 

import MyScreen from './MyScreen'; 
... 
Home: { 
    screen: MyScreen, 
} 

私は私が間違ってやっているかわからないんだけど。ナビゲータを個別に起動すると、それらが動作します。しかし、残念ながら組み合わせられていない。

これは私がチュートリアルを使用して作成したApp.js、次のとおりです。

import React from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Button 
} from 'react-native'; 

import { 
    StackNavigator, 
    TabNavigator 
} from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
     title: 'Welcome', 
    }; 
    render() { 
     const { navigate } = this.props.navigation; 
     return <View> 
      <Text>Hello!</Text> 
      <Button 
       onPress={() => this.props.navigation.navigate('Chat', { user: 'Daniel' })} 
       title="ReactNavigation Test" 
      /> 
     </View>; 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
     title: 'ReactNavigation Test', 
    }; 
    render() { 
     const { params } = this.props.navigation.state; 
     return (
      <View> 
       <Text>Neue Seite für den Navigator. Hallo {params.user}!</Text> 
      </View> 
     ); 
    } 
} 

class RecentChatsScreen extends React.Component { 
    render() { 
     return <Text>List of recent chats</Text> 
    } 
} 

class AllContactsScreen extends React.Component { 
    render() { 
     return <Text>List of all contacts</Text> 
    } 
} 

const ReactNativeTest = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
}); 

const MainScreenNavigator = TabNavigator({ 
    Recent: { screen: RecentChatsScreen }, 
    All: { screen: AllContactsScreen }, 
}); 

AppRegistry.registerComponent('ReactNativeTest',() => ReactNativeTest); 

はたぶん、あなたはそこに私を助けることができます。私は同じ質問 hereを尋ねましたが、これは質問のためのより良い場所です。

ありがとうございます!

答えて

6

私も出始めていたとき、私は

ReactNativeTestMainScreenNavigatorを入れて...このミスを犯しました。

あなたが現在持っているので、MainScreenNavigatorは呼び出されたときに存在しません。

const MainScreenNavigator = TabNavigator({ 
    Recent: { screen: RecentChatsScreen }, 
    All: { screen: AllContactsScreen }, 
}); 

const ReactNativeTest = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
}); 
+0

もちろん、どのように私はこれを見逃すことができます。どうもありがとう! – Daniel

+0

ありがとう、私も同じ間違いをした! –

+0

おっと!ホイストはありません!私はそれがJSなので、どこで定義しても変数を解決するつもりだと思っていました。 –

関連する問題