Question

我正在尝试构建一个tabview，但我无法找到如何更改和渲染场景。我的主要观点是这一个（App.js）：

<View style={{flex: 1}}>
  <TabView 
    ref="tabs"
    onTab={(tab) => {
      this.setState({tab});
    }}
    tabs={[
      {
        component: List,
        name: 'Découvrir',
        icon: require('../assets/img/tabs/icons/home.png')
      },
      {
        component: Friends,
        name: 'Amis',
        icon: require('../assets/img/tabs/icons/friend.png'),
        pastille: this.state.friendsPastille < 10 ? this.state.friendsPastille : '9+'
      },
      {
        component: RecoStep1,
        icon: require('../assets/img/tabs/icons/add.png'),
        hasShared: MeStore.getState().me.HAS_SHARED
      },
      {
        component: Notifs,
        name: 'Notifs',
        icon: require('../assets/img/tabs/icons/notif.png'),
        pastille: this.state.notifsPastille < 10 ? this.state.notifsPastille : '9+'
      },
      {
        component: Profil,
        name: 'Profil',
        icon: require('../assets/img/tabs/icons/account.png')
      }
    ]}
    initialSkipCache={!!this.notifLaunchTab}
    initialSelected={this.notifLaunchTab || 0}
    tabsBlocked={false} />
</View>

TabView组件就是这个，它运行正常。只有导航器才会呈现空白屏幕......

renderTab(index, name, icon, pastille, hasShared) {
  var opacityStyle = {opacity: index === this.state.selected ? 1 : 0.3};
  return (
    <TouchableWithoutFeedback key={index} style={styles.tabbarTab} onPress={() => {
      if (this.props.tabsBlocked) {
        return;
      }
      this.resetToTab(index);
    }}>
      <View style={styles.tabbarTab}>
        <Image source={icon} style={opacityStyle} />

        {name ?
          <Text style={[styles.tabbarTabText, opacityStyle]}>{name}</Text>
        : null}
      </View>
    </TouchableWithoutFeedback>
  );
}

resetToTab(index, opts) {
  this.setState({selected: index});
}

renderScene = (route, navigator) => {
  var temp = navigator.getCurrentRoutes();
  return temp[this.state.selected].component;
}

render() {
  return (
    <View style={styles.tabbarContainer}>
      <Navigator
        style={{backgroundColor: '#FFFFFF', paddingTop: 20}}
        initialRouteStack={this.props.tabs}
        initialRoute={this.props.tabs[this.props.initialSelected || 0]}
        ref="tabs"
        key="navigator"
        renderScene={this.renderScene}
        configureScene={() => {
          return {
            ...Navigator.SceneConfigs.FadeAndroid,
            defaultTransitionVelocity: 10000,
            gestures: {}
          };
        }} />

      {this.state.showTabBar ? [
         <View key="tabBar" style={styles.tabbarTabs}>
            {_.map(this.props.tabs, (tab, index) => {
            return this.renderTab(index, tab.name, tab.icon, tab.pastille, tab.hasShared);
            })}
        </View>
      ] : []}
    </View>
  );
}

我知道我做错了什么，但我无法弄清楚是什么......更改标签不会显示如下所示的任何内容。我使用NavigatorIOS for iOS版本，在TabView的render方法中使用以下导航器工作正常（我不知道如何从NavigatorIOS转到Navigator）：

<Navigator
  style={{backgroundColor: '#FFFFFF', paddingTop: 20}}
  initialRouteStack={this.props.tabs}
  initialRoute={this.props.tabs[this.props.initialSelected || 0]}
  ref="tabs"
  key="navigator"
  renderScene={(tab, navigator) => {
    var index = navigator.getCurrentRoutes().indexOf(tab);
    return (
      <NavigatorIOS
        style={styles.tabbarContent}
        key={index}
        itemWrapperStyle={styles.tabbarContentWrapper}
        initialRoute={tab.component.route()}
        initialSkipCache={this.props.initialSkipCache} />
      );
  }}
  configureScene={() => {
    return {
      ...Navigator.SceneConfigs.FadeAndroid,
      defaultTransitionVelocity: 10000,
      gestures: {}
    };
  }} />

Answer 1

尝试添加

flex:1

导航器的属性。如果这不起作用，请检查tabbarContainer是否也有

flex:1

属性。

Answer 2

好的，我找到了答案：我将renderScene方法更改为以下内容：

renderScene = (route, navigator) => {
  var temp = navigator.getCurrentRoutes();
  return React.createElement(temp[this.state.selected].component, _.extend({navigator: navigator}, route.passProps));
}

现在工作正常。

React Native Android更改场景导航器

2 个答案: