React native 对其他类作出反应 import React，{Component}来自'React'； 进口{ 评估学， 样式表， 文本， 看法 领航员， 可触摸不透明度， 形象 }从“反应本机”； 首先从“./First”导入； 导出默认类Home extends组件{ navSecond（）{ 这个是.props.navigator.push({ id:'第一'， 标题:"第一",， 姓名：'第一'， 组成部分：第一 }) } render（）{ 返回( 轮廓 健康跟踪器 医疗保健 警报 健康主题 我的文件 ); } }

在这段代码中，我需要使用push导航到First.js，但我无法做到这一点。通过单击Profile，它应该导航到First.js，这里push（）可以工作，但不能导航到First.js。我将上面的页面设置为初始路径，那么如何链接到所有页面

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

import First from './First';

export default class Home extends Component{
     navSecond(){
    this.props.navigator.push({
      id: 'First',
      title: 'First',
       name: 'First',
       component: First
    })
  }
render(){
    return(
        <View>
        <View style={{height:220,backgroundColor:'#DCDCDC'}}>
            <Image style={{width:120,height:120,top:50,left:120,backgroundColor:'red'}} 
        source={require('./download.png')} />
        </View>
         <View style={{top:30}}>
         <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <TouchableOpacity style= { styles.views}  onPress={this.navSecond.bind(this)}>
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Profile </Text>
          </TouchableOpacity>
           <TouchableOpacity style= { styles.views1} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Tracker </Text>
          </TouchableOpacity>
          </View>

           <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <TouchableOpacity style= { styles.views2} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Medical Care </Text>
          </TouchableOpacity>
           <TouchableOpacity style= { styles.views3} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Alerts </Text>
          </TouchableOpacity>
          </View>

           <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <TouchableOpacity style= { styles.views4} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Topics </Text>
          </TouchableOpacity>
           <TouchableOpacity style= { styles.views5} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> My Documents </Text>
          </TouchableOpacity>
          </View>

         </View>

        </View>
        );
}
}

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
领航员，
可触摸不透明度
}从“反应本机”；
从“./主页”导入主页；
导出默认类扩展组件{
构造函数（）{
超级（）
}
render（）{
返回(
);
}
renderScene（路线、导航器）{
如果（route.name==“Home”）{
返回(
)
}
}
}
变量NavigationBarRouteMapper={
LeftButton（路线、导航器、索引、导航状态）{
如果（索引>0）{
返回(
{if（index>0）{navigator.pop（）}}>
返回
)
}
else{return null}
},
右按钮（路线、导航器、索引、导航状态）{
如果（route.openMenu）返回(
route.openMenu（）}>
{route.rightText | |'菜单'}
)
},
标题（路线、导航器、索引、导航状态）{
返回(
{route.title}
)
}
}; 

随着应用程序的增长，您会发现导航器是不够的。所以我建议您使用react native router flux。它很好用

您可以简单地导航到任何场景并将数据作为道具发送

例如：

import React，{Component}来自'React'；
从“react native”导入{…}；
从“react native router flux”导入操作；
导出默认类示例扩展组件{
组件willmount（）{
}
render（）{
返回(
{Actions.media（{customData:'Hello！'}}
>导航到场景媒体
)
}   
}
AppRegistry.registerComponent（'示例'，（）=>示例）随着应用程序的增长，您会发现导航器是不够的。所以我建议您使用react native router flux。它很好用

您可以简单地导航到任何场景并将数据作为道具发送

例如：


import React，{Component}来自'React'；
从“react native”导入{…}；
从“react native router flux”导入操作；
导出默认类示例扩展组件{
组件willmount（）{
}
render（）{
返回(
{Actions.media（{customData:'Hello！'}}
>导航到场景媒体
)
}   
}
AppRegistry.registerComponent（'示例'，（）=>示例）谢谢@Ataomega。。我会试试上面的code@PrasannaKumarKulkarni不客气。如果您对RN路由器流量有任何进一步的问题，请在此处进行注释和标记。“未定义”不是对象（评估“\u reactnative Router
Flux2.default
.First”），我收到了此错误。@PrasannaKumarKulkarni您需要共享源代码。在这里分享，然后问另一个问题并标记我。我应该在componentWillMount（）函数中编写什么？我错过了谢谢你@Ataomega。。我会试试上面的code@PrasannaKumarKulkarni不客气。如果您对RN路由器流量有任何进一步的问题，请在此处进行注释和标记。“未定义”不是对象（评估“\u reactnative Router
Flux2.default
.First”），我收到了此错误。@PrasannaKumarKulkarni您需要共享源代码。在这里分享，然后问另一个问题并标记我。我应该在componentWillMount（）函数中编写什么？我错过了
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity
} from 'react-native';

import Home from './Home';

export default class Prof extends Component{

     constructor(){
      super()
   }

    render(){
        return (

             <Navigator
               initialRoute = {{ name: 'Home', title: 'Home' }}
               renderScene = { this.renderScene }
               navigationBar = {
               <Navigator.NavigationBar
                  style = { styles.navigationBar }
                  routeMapper = { NavigationBarRouteMapper } />
            }
         />

            );
    }

 renderScene(route, navigator) {
      if(route.name == 'Home') {
         return (
            <Home
               navigator = {navigator}
               {...route.passProps} 
            />
         )
      }
  }
}


var NavigationBarRouteMapper = {
   LeftButton(route, navigator, index, navState) {
      if(index > 0) {
         return (
         <View>
            <TouchableOpacity
               onPress = {() => { if (index > 0) { navigator.pop() } }}>
               <Text style={ styles.leftButton }>
                  Back
               </Text>
            </TouchableOpacity>
            </View>
         )
      }
      else { return null }
   },
   RightButton(route, navigator, index, navState) {
      if (route.openMenu) return (
         <TouchableOpacity
            onPress = { () => route.openMenu() }>
            <Text style = { styles.rightButton }>
               { route.rightText || 'Menu' }
            </Text>
         </TouchableOpacity>
      )
   },
   Title(route, navigator, index, navState) {
      return (
         <Text style = { styles.title }>
            {route.title}
         </Text>
      )
   }
};