在反應原生通量路由器中傳遞道具

Question

所以我對React Native還是有點新，但是我有一個應用程序，幾乎可以滿足我的需求。我有App.js，它使用TabBarIOS組件在屏幕底部顯示我的標籤導航。當你觸摸一個標籤，狀態更新和相關內容加載和顯示：

App.js

import React, { Component } from 'react'; 
import { TabBarIOS, Platform, Image } from 'react-native'; 

import IconII from 'react-native-vector-icons/Ionicons'; 
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons'; 

import Colors from './Colors'; 
import RouterItem1 from './routers/RouterItem1'; 
import RouterItem2 from './routers/RouterItem2'; 
import RouterHome from './routers/RouterHome'; 
import Settings from './components/Settings'; 

class FooterNav extends Component { 

    state = { 
    selectedTab: 'home', 
    }; 

    handleClick = (routeData) => { 
    console.log('This has received data', routeData); 
    this.setState({ selectedTab: routeData }); 
    console.log(this.state); 
    } 

    renderCurrentView() { 
    switch (this.state.selectedTab) { 
     case 'home': 
     return (
      <RouterHome handleClick={this.handleClick} /> 
     ); 
     case 'item2': 
     return (
      <RouterItem2 /> 
     ); 
     case 'item1': 
     return (
      <RouterItem1 /> 
     ); 
     case 'settings': 
     return (
      <Settings /> 
     ); 
     default: 
     return false; 
    } 
    } 

    render() { 
    return (
     <TabBarIOS 
     unselectedTintColor={Colors.third}  //Unselected labels 
     unselectedItemTintColor={Colors.third} //Unselected icons 
     tintColor={Colors.brandPrimary}  //Selected 
     barTintColor={Colors.light}   //Bar background 
     > 
     <IconII.TabBarItem 
      title="Home" 
      iconName="ios-home-outline" 
      selectedIconName="ios-home" 
      selected={this.state.selectedTab === 'home'} 
      receiveData={this.receiveData} 
      onPress={() => { 
      this.setState({ 
       selectedTab: 'home', 
      }); 
      }} 
     > 
      {this.renderCurrentView()} 
     </IconII.TabBarItem> 
     <TabBarIOS.Item 
      icon={require('./images/item2-icon-line@3x.png')} 
      selectedIcon={require('./images/item2-icon-selected@3x.png')} 
      title="item2" 
      selected={this.state.selectedTab === 'item2'} 
      onPress={() => { 
      this.setState({ 
       selectedTab: 'item2', 
      }); 
      }} 
     > 
      {this.renderCurrentView()} 
     </TabBarIOS.Item> 
     <IconMCI.TabBarItem 
      title="item1" 
      iconName="cookie" 
      selectedIconName="cookie" 
      selected={this.state.selectedTab === 'item1'} 
      onPress={() => { 
      this.setState({ 
       selectedTab: 'item1', 
      }); 
      }} 
     > 
      {this.renderCurrentView()} 
     </IconMCI.TabBarItem> 
     <IconII.TabBarItem 
      title="More" 
      iconName="ios-more-outline" 
      selectedIconName="ios-more" 
      selected={this.state.selectedTab === 'settings'} 
      onPress={() => { 
      this.setState({ 
       selectedTab: 'settings', 
      }); 
      }} 
     > 
      {this.renderCurrentView()} 
     </IconII.TabBarItem> 
     </TabBarIOS> 
    ); 
    } 
} 

module.exports = FooterNav; 

react-native-router-flux是一個偉大的插件，一旦它拉在路由器的流量是完全我想要它。我唯一的問題是與<RouterHome>模塊：

RouterHome.js

import React from 'react'; 
import { Scene, Router } from 'react-native-router-flux'; 

import styles from '../Styles'; 
import { content } from '../content.js'; 

import AnotherScene from '../components/pages/AnotherScene'; 
import Home from '../components/Home'; 

const RouterHomeComponent =() => { 
    return (
    <Router 
     sceneStyle={styles.sceneStyle} 
     navigationBarStyle={styles.navBar} 
     titleStyle={styles.navBarTitle} 
     barButtonIconStyle={styles.barButtonIconStyle} 
    > 
     <Scene 
     key="Home" 
     component={Home} 
     title={content.heading} 
     hideNavBar 
     /> 
     <Scene 
     key="AnotherScene" 
     component={AnotherScene} 
     title='title' 
     hideNavBar={false} 
     /> 
    </Router> 
); 
}; 

export default RouterHomeComponent; 

加載的默認視圖是<Home>模塊：

Home.js

import React, { Component } from 'react'; 
import { Text, View, TouchableOpacity } from 'react-native'; 
import { Actions } from 'react-native-router-flux'; 

import styles from '../Styles'; 
import { content } from '../content.js'; 

class Home extends Component { 

    displayItem1 =() => { 
    this.props.handleClick('item1'); 
    } 
    displayItem2 =() => { 
    this.props.handleClick('item2'); 
    } 
    displayAnotherScene() { 
    Actions.AnotherScene(); 
    } 

    render() { 
    return (
     <View style={styles.viewWrapperHome}> 

     <Text style={styles.heading}>{content.greeting}</Text> 

     <TouchableOpacity onPress={this.displayItem1}> 
      <Text>First item</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.displayItem2}> 
      <Text>Second item</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.displayAnotherScene}> 
      <Text>Another scene</Text> 
     </TouchableOpacity> 

     </View> 
    ); 
    } 
} 

export default Home; 

所以我希望發生的是，如果th e用戶點擊屏幕上顯示的前兩個按鈕（First item/Second item），道具將被傳回App.js，狀態將改變並且場景將被更新。它基本上是不使用頁腳菜單的另一種導航方式。

我知道這可以在不使用react-native-router-flux模塊的情況下工作，因爲我在將模塊添加進去之前運行了它。問題是我真的需要它來處理<Home>模塊中的其他頁面（還有很多要添加）。

任何人都可以提出一種方法，我可以通過路由器回傳道具回我的App.js？

Answer 1

好的，所以我真的明白了這一點 - 事實證明，這完全是我的錯;道具沒有傳到RouterHome，所以他們雙方都輸了。新RouterHome看起來是這樣的：

RouterHome.js

import React from 'react'; 
import { Scene, Router } from 'react-native-router-flux'; 

import styles from '../Styles'; 
import { content } from '../content.js'; 

import AnotherScene from '../components/pages/AnotherScene'; 
import Home from '../components/Home'; 

const RouterHomeComponent = (props) => {  <---Didn't add props 
    return (
    <Router 
     sceneStyle={styles.sceneStyle} 
     navigationBarStyle={styles.navBar} 
     titleStyle={styles.navBarTitle} 
     barButtonIconStyle={styles.barButtonIconStyle} 
    > 
     <Scene 
     key="Home" 
     component={Home} 
     title={content.heading} 
     hideNavBar 
     handleClick={props.handleClick}  <---Didn't pass props 
     /> 
     <Scene 
     key="AnotherScene" 
     component={AnotherScene} 
     title='title' 
     hideNavBar={false} 
     /> 
    </Router> 
); 
}; 

export default RouterHomeComponent; 

我標誌着我做了兩個變化。希望這會幫助別人！ :)