react-native – Flux(alt),TabBarIOS以及尚未触摸/加载的监听器和选项卡

我有一个问题,我肯定有一个简单的解决方案,但我是React和React Native的新手,所以我不确定我缺少什么.

我的应用程序根目录有一个TabBarIOS组件,有两个选项卡：TabA和TabB. TabB订阅了TabA创建的Flux商店(我正在使用alt)的事件. TabA基本上将TabB播放的项目排入队列.这部分代码很好,并按预期工作.

问题是TabA是默认选项卡,因此用户可以使用TabA作为排队项目,但由于未触摸/单击TabB,因此尚未创建TabB组件,因此尚未注册其侦听器.只有在按下TabB时才会创建并正确接收事件.

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

是的,如果你没有使用Navigator组件,你需要做一些hacky.如果您正在使用Navigatory,可以使用initialRouteStackprop指定一组最初安装的路由.然而,这需要您按照我认为的应用程序的方式进行修改.

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

下面你会找到这个例子的代码,检查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);