Flux (alt), TabBarIOS and Listeners and tabs that have not yet been touched / loaded

Question

I have a problem, I'm sure it has a simple solution, but I'm new to React and React Native, so I'm not sure what I am missing.

My application has the TabBarIOS component in its root directory with two tabs: TabA and TabB. TabB subscribes to events from the Flux repository (I use alt) that TabA creates. TabA basically captures the elements that TabB plays. This piece of code is beautiful and works as expected.

The problem is that TabA is the default tab, so the user can use TabA queue elements, but since TabB was not touched / pressed, the TabB component was not created, so the listener was not registered. Only when you press TabB is it created and correctly receives events.

So, how can I ensure that the TabB component is created when rendering the TabBarIOS component? Do I need to hack something, how to set the active TabB tab on boot and turn it back to TabA before the user does something?

Answer 1

, - , Navigator. Navigator, initialRouteStack prop. .

Navigator, - , . 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);