在react-native-flux-router中传递道具

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;

所以我期望发生的是,如果用户点击屏幕上显示的前两个按钮(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;

我已经标记了我所做的两个改变.希望这会对某人有所帮助!:)