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

下一课是我的菜单课程。我的菜单类有一个用户可以单击的选项列表。例如，用户单击“添加词”选项，他应该导航到该页面。它在这里抛出一个错误：Minified React error＃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，然后他将被导航到该屏幕。如果我将所有内容保存在同一个文件中，我就能成功完成此操作。如果我把addWord类放在index.android.js中，那么它就像我怀疑的那样工作。问题是，当我尝试分离文件时，我收到错误消息。任何人都可以指出我在第一次尝试时犯的错误。感谢。

   **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

您可以使用react-native路由器磁通库来执行此操作。

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

要使用此功能，请在目标网页中创建组件场景，例如index.ios / android.js，创建

等场景

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

在menu.js文件中创建一个可触摸的组件

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

同样，您可以转到第二页。

它非常易于使用。祝你好运

React-Native Navigator：无法使用Navigator

1 个答案: