react-native - Flux (alt), TabBarIOS, 和 Listeners 和 tabs 还没有被触摸/加载

Question

我有一个问题，我确信有一个简单的解决方案，但我是 React 和 React Native 的新手，所以我不确定我错过了什么。

我的应用程序的根有一个 TabBarIOS 组件，有两个选项卡:TabA 和 TabB。 TabB 订阅了来自 TabA 创建的 Flux 存储(我正在使用 alt)的事件。 TabA 基本上将 TabB 播放的项目排入队列。这部分代码很好，可以按预期工作。

问题是 TabA 是默认选项卡，因此用户可以使用 TabA 将项目排入队列，但由于尚未触摸/单击 TabB，因此尚未创建 TabB 组件，因此尚未注册它的监听器。只有当按下 TabB 时，它才会被创建并正确接收事件。

那么如何确保在呈现 TabBarIOS 组件时创建了 TabB 组件？我是否需要像在初始加载时将事件选项卡设置为 TabB 并在用户执行任何操作之前将其翻转回 TabA 之类的操作？

Answer 1

是的，如果您不使用 Navigator，您将需要做一些hacky成分。如果您使用的是 Navigator您可以指定一组路由来初始安装 initialRouteStack支柱。但是，这将需要您稍微修改我认为的应用程序的工作方式。

如果不使用 Navigator，你确实必须按照你的建议做一些 hacky 的事情。我已经设置了一个工作示例 here基于 RN 的 TabBar 示例。

下面你会找到这个例子的代码，检查console.log (它们似乎不适用于 rnplay)以查看该组件在打开应用程序时已安装。

示例代码

var React = require('react-native');
var {
  AppRegistry,
  Component,
  Image,
  StyleSheet,
  TabBarIOS,
  Text,
  View
} = React;

import _ from 'lodash';

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

class StackOverflowApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedTab: 'blueTab',
      notifCount: 0,
      presses: 0
    };
  }

  _renderContent = (color, pageText, num) => {
    return (
      <View style={[styles.tabContent, {backgroundColor: color}]}>
        <Text style={styles.tabText}>{pageText}</Text>
        <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
      </View>
    );
  };

  componentWillMount() {
    this.setState({selectedTab: 'redTab'});
  }

  componentDidMount() {
    this.setState({selectedTab: 'blueTab'});
  }

  render () {
    return (
      <View style={{flex: 1}}>
        <TabBarIOS
          tintColor="white"
          barTintColor="darkslateblue">
          <TabBarIOS.Item
            title="Blue Tab"
            icon={{uri: base64Icon, scale: 3}}
            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
            }}>
            <Page1 />
          </TabBarIOS.Item>
          <TabBarIOS.Item
            systemIcon="history"
            badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab'
              });
            }}>
            <Page2 />
          </TabBarIOS.Item>
        </TabBarIOS>
      </View>
    );
  };
}

class Page1 extends Component {
  static route() {
    return {
      component: Page1
    }
  };

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    console.log('page 1 mount');
  }

  componentWillUnmount() {
    console.log('page 1 unmount');
  }

  render() {
    return (
      <View style={styles.tabContent}>
        <Text style={styles.tabText}>Page 1</Text>
      </View>
    );
  }
}

class Page2 extends Component {
  static route() {
    return {
      component: Page2
    }
  };

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    console.log('page 2 mount');
  }

  componentWillUnmount() {
    console.log('page 2 unmount');
  }

  render() {
    return (
      <View style={styles.tabContent}>
        <Text style={styles.tabText}>Page 2</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

AppRegistry.registerComponent('StackOverflowApp', () => StackOverflowApp);