react-native路由器通量操作不是導航到其他頁面

Question

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


import First from './First'; 

export default class Home extends Component{ 
     componentWillMount() { 

    } 


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 = {()=>{ Actions.First({customData: 'Hello!'}) }}> 
      <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> 


     </View> 
     ); 
} 
} 

在上面的代碼中，Actions in not working意味着不能導航到First.js頁面，我如何編輯我的代碼，並且我沒有寫入任何內容ComponentWillMount（）函數，我應該寫在裏面呢？ ataomega

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

首先，我建議你創建一個rounter成分，並從那裏讓你的應用程序啓動： 像這樣的事情

import { Scene, Router, ActionConst } from 'react-native-router-flux'; 
import First from 'yourRoute'; 
const RouterComponent =() => { 
    <Router> 
     <Scene 
      key="First" 
      component={First} 
      initial /> 

     ... your other scenes 
    </Router> 
} 
export default RouterComponent; 

然後在你的索引頁或任何你從加載只需添加此組件

import React, { Component } from 'react' 
import RouterComponent from './Router' 

class AppContainer extends Component { 
    render() { 
    return (
     <RouterComponent /> 
    ); 
    } 
} 


export default AppContainer; 

現在您可以從您的代碼中調用它。任何懷疑問他們：P