在 react-native-flux-router 中传递道具 [英] Passing props in react-native-flux-router

问题描述

所以我对 React Native 还是有点陌生​​，但是我有一个应用程序几乎可以按照我想要的方式运行.我有 App.js，它使用 TabBarIOS 组件在屏幕底部显示我的选项卡式导航.当您触摸选项卡时，状态会更新并加载并显示相关内容:

So I'm still a bit new to React Native, but I've got an app working nearly how I want it to. I have App.js which uses the TabBarIOS component to display my tabbed navigation at the bottom of the screen. When you touch a tab, the state updates and the relevant content is loaded and displayed:

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/[e-mail]')}
          selectedIcon={require('./images/[e-mail]')}
          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 是一个很棒的插件，一旦它拉入路由器，流量正是我想要的.我唯一的问题是 模块:

react-native-router-flux is a great plugin, once it pulls in a router the flow is exactly what I want it to be. The only problem I have is with the <RouterHome> module:

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;

加载的默认视图是 模块:

The default view that is loaded is the <Home> module:

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，状态会改变，场景也会更新.它基本上是不使用页脚菜单的另一种导航方式.

So what I expect to happen is that if the user clicks on the first two buttons displayed on the screen (First item/Second item), the prop will be passed back to App.js, the state will change and the scene will be updated. It basically is an alternative way of navigating without using the footer menu.

我知道这会在不使用 react-native-router-flux 模块的情况下工作，因为我在添加它之前已经运行了它.问题是我真的需要它来处理另一个 模块中的页面(还有很多要添加).

I know that this would work without using the react-native-router-flux module as I had it running before I added it in. The problem is that I really need it to handle the other pages from the <Home> module (many more to add).

谁能建议我可以通过路由器将道具传回我的 App.js 的方法?

Can anyone suggest a way I can pass back the props through the router back to my App.js?

推荐答案

好吧，我真的想通了 - 结果完全是我的错；道具没有被传递到 RouterHome ，所以他们迷路了.新的 RouterHome 看起来像这样:

Okay, so I actually figured this out - it turned out to totally be my fault; the props weren't getting passed to RouterHome and so they got lost either side. The new RouterHome looks like this:

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;

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

I've marked the two changes I made. Hopefully this will help someone! :)

这篇关于在 react-native-flux-router 中传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！