React原生推送到其他類

Question

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

在這段代碼中，我需要使用推送導航到First.js，但我無法做到這一點。通過點擊配置文件它應該導航到First.js，在這裏push（）工作，但不是導航到First.js。上面的頁面設置爲初始路線，那麼我如何鏈接到所有頁面？

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

Answer 1

隨着您的應用程序的增長，您會發現導航器不夠用。所以我提供你使用react-native-router-flux。它運作良好。

您可以簡單地導航到任何場景並以道具形式發送數據。

例如：

import React, { Component } from 'react'; 
 
import { ... } from 'react-native'; 
 
import Actions from 'react-native-router-flux'; 
 

 
export default class Example extends Component { 
 
    componentWillMount() { 
 
    
 
    } 
 

 
    render() { 
 
     return (
 
      <View> 
 
      <TouchableOpacity 
 
       onPress={()=>{ Actions.media({customData: 'Hello!'}) }} 
 
      ><Text>Navigate to scene Media</Text></TouchableOpacity> 
 
     ) 
 
    } 
 
} 
 

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

導航到現場Media並通過道具命名customData用 '你好'