在 react-native-flux-router 中传递 props

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)，prop 将被传递回 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;

我已经标记了我所做的两个更改。希望这会帮助别人！ :)

在 react-native-flux-router 中传递 props

Passing props in react-native-flux-router

reactjs

react-native

react-native-router-flux