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吗？

在react-native-flux-router

0 个答案: