React-native drängen auf andere Klasse

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

In diesem Code muss ich zu First.js mit Push navigieren, aber ich bin nicht in der Lage, das zu tun. Wenn Sie auf Profil klicken, sollte es zu First.js navigieren, hier funktioniert push(), aber es wird nicht zu First.js navigiert. Die obige Seite habe ich als anfängliche Route festgelegt. Wie kann ich dann auf alle Seiten verlinken?

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

Wenn Ihre App wächst, werden Sie feststellen, dass der Navigator nicht ausreicht. So biete ich Ihnen an, reactive-router-flux zu verwenden. Es funktioniert gut.

können Sie einfach zu jeder Szene navigieren und die Daten als Requisiten senden.

zum Beispiel:

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

zu Szene navigieren Media und vorbei Requisiten namens customData mit dem Wert von 'Hallo'