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

在这段代码中，我需要使用push导航到First.js，但我无法做到这一点。通过单击Profile它应该导航到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的道具，其值为'Hello'

React-native推向其他类

1 个答案: