反应向其他班级推动

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

在此代码中，我需要使用PUST导航到first.js，但我无法做到这一点。通过单击配置文件，它应该导航到first.js，push（）正在工作，但这并不是首先导航到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的道具，带有'hello''