React-Native Navigator：Navigatorを使用してコンポーネントを追加できない

Question

Navigatorを使用していくつかの異なる画面で小さなアプリケーションを構築しようとしています。私が実行している問題は、私の見解ではさまざまなコンポーネントをインポートすることです。ここに私のindex.android.js index.ANDROID.JS

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableHighlight 
} from 'react-native'; 


import Menu from './src/menu'; 
import Home from './src/addWord'; 
var JapaneseProjectShare2 = React.createClass({ 


    renderScene(route, navigator) { 
    console.log(route); 
    if(route.name == 'menu') { 
     return <Menu navigator={navigator} {...route.passProps} /> 
    } 
    if(route.name == 'Home') { 
     return <Home navigator={navigator} {...route.passProps} /> 
    } 
    if(route.name == 'AddWords') { 
     console.log('display add words'); 
     return <Home navigator={navigator} {...route.passProps} /> 
    } 
    }, 
    render() { 
     return (
     <Navigator 

      initialRoute={{ name: 'menu' }} 
      renderScene={ this.renderScene } /> 
     ) 
    } 
    }); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 80 
    }, 
    heading: { 
    fontSize:22, 
    marginBottom:10 
    }, 
    button: { 
    height:60, 
    justifyContent: 'center', 
    backgroundColor: '#efefef', 
    alignItems: 'center', 
    justifyContent: 'center' 
    }, 
    buttonText: { 
    fontSize:20 
    } 
}); 

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

この次のクラスは私のMenuクラスです。私のメニュークラスには、ユーザーがクリックできるオプションのリストがあります。たとえば、ユーザーが[アドオン]オプションをクリックすると、そのページに移動する必要があります。それはここにエラーを投げます：Minified Reactエラー＃130。

import React, { Component} from 'react'; 
import { Container, Header,TouchableHighlight, Title,StyleSheet, Content,Icon,Card,CardItem, InputGroup, Input,Text,View} from 'native-base'; 


var Menu = React.createClass({ 


    getInitialState(){ 
     return({ 
      menu:['AddWords','View List','DeleteWords','EditWords','Dictionary'] 
     }) 
    }, 
    _navigate(name) { 
     this.props.navigator.push({ 
     name: name, 
     passProps: { 
      name: name 
     } 
     }) 
    }, 
    displayMenu(menu){ 
      let intro = 'Please select an option'; 
      return(
       menu.map((menu,index)=>{ 
        return(
        <Container style={{backgroundColor:'#565051'}}>  
           <Content> 
            <Card> 
             <CardItem button onPress={() => this.navigateToMenu(this.state.menu[index])}>     
              <Icon name='ios-list'/>    
              <Text style={{textAlign:'center'}}>{menu}</Text>         
             </CardItem> 

           </Card> 
           </Content> 
        </Container> 

        ) 

       }) 
      ) 

     }, 
     navigateToMenu(index){ 
      this._navigate(index) 

     }, 
    render(){ 
     return(
     <Container style={{backgroundColor:'#565051'}}> 
      <Header> 
       <Title>Menu</Title> 
      </Header> 
      <Content> 
       {this.displayMenu(this.state.menu)} 
      </Content> 
     </Container>  
     // <View> 
     // {this.displayMenu(this.state.menu)} 
     // </View> 

     ) 
    } 

    }) 

module.exports = Menu; 

私の目標は、メニュークラスをクリックして正しい画面にすることです。例えば、ユーザがAddWordをクリックすると、彼はその画面にナビゲートされる。すべてを同じファイルに保存すると、これを正常に実行できます。私がindex.android.jsの内部にAddWordクラスを置くと、それは疑わしいものとして機能します。問題は、ファイルを分割しようとするとエラーメッセージが表示されることです。誰もが私の最初の試みで間違いを指摘できますか？ありがとう。

**AddWord.js** 

import React, { Component} from 'react'; 
import { Container, Header,TouchableHighlight, Title,StyleSheet, Content,Icon,Card,CardItem, InputGroup, Input,Text,View} from 'native-base'; 


var addWords = React.createClass({ 
     render(){ 
      return(){ 
      <View> 
      <Text>Testing</Text> 
      <View> 
      }  
     }    



      }) 

module.exports = addWords; 

Answer 1

これは、反応ネイティブルータフラックスライブラリを使用して行うことができます。

https://github.com/aksonov/react-native-router-flux

これは

として触れることができるコンポーネントを作成index.iosのようなランディングページにあなたのコンポーネントシーンを作成/ android.jsあなたmenu.jsファイルで

<Router> 
    <Scene key="landing_page" component={LandingPage} initial={true}> </Scene> 
    <Scene key='firstPage' component={FirstPage} ></Scene> 
    <Scene key='secondPage' component={SecondPage} ></Scene> 
</Router> 

のようなシーンを作成使用するには

<TouchableHighligh onPress={()=>{Actions.first()}}> 
    <View> 
    <Text>Click here to go to first page 
    </Text> 
    </View> 
</TouchableHighlight> 

同様に、2番目のページに移動できます。

非常に使いやすいです。 GoodLuck