Невозможно выполнить рендеринг на основе this.state в React Native

Question

Любая идея, почему {this.state.showTabBar === true ? this._renderTabBar : null} терпит неудачу в SampleApp составная часть? Работает нормально, если рендер просто <TabBarExample />,

Моя цель - использовать this.state.showTabBar решить, когда показывать TabBarIOS.

Вот ссылка на React Native Playground: https://rnplay.org/apps/5pQC9A

'use strict';

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


var SampleApp = React.createClass({
  getInitialState: function() {
    return {
      showTabBar: true // I will eventually use this to decide 
                                        // if TabBarIOS will be visible.
    };
  },

  _renderTabBar: function() {
    return (
        <TabBarExample />
    );
  },

  render: function() {    
    return (         
      // This line fails.
      {this.state.showTabBar === true ? this._renderTabBar : null}

        // <TabBarExample /> // This will work if uncomment.
    );
  }
});


var TabBarExample = React.createClass({
  statics: {
    title: '<TabBarIOS>',
    description: 'Tab-based navigation.',
  },

  displayName: 'TabBarExample',

  getInitialState: function() {
    return {
      selectedTab: 'blueTab',
      notifCount: 0,
      presses: 0,
    };
  },

  _renderContent: function(color: string, pageText: string, num?: number) {
    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>
    );
  },

  render: function() {
    return (
      <TabBarIOS
        tintColor="white"
        barTintColor="darkslateblue"
          translucent={true}>

        <TabBarIOS.Item
          title="Blue Tab"
          systemIcon="search"
          selected={this.state.selectedTab === 'blueTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'blueTab',
            });
          }}>
          <MyViewOne />
        </TabBarIOS.Item>

        <TabBarIOS.Item
          title="Red Tab"
          systemIcon="history"
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'redTab',
              notifCount: this.state.notifCount + 1,
            });
          }}>
          {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
        </TabBarIOS.Item>

        <TabBarIOS.Item
          systemIcon="contacts"
          title="More Green"
          selected={this.state.selectedTab === 'greenTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'greenTab',
              presses: this.state.presses + 1
            });
          }}>
          {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
        </TabBarIOS.Item>

      </TabBarIOS>
    );
  }
});


var MyViewOne = React.createClass({
  render: function() {
    return (            
      <View style={[styles.tabContent, {backgroundColor: 'orange'}]}>
        <Text style={styles.tabText}>I like Iron Maiden</Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },  
  button: {
    backgroundColor: 'green',
    margin: 10,
  }  
});

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

Answer 1

Как сказал Гортем, вы не вызываете функцию. Реакт не сделает это за вас.

Кроме того, вместо троичного, ваш мог бы сделать:

{this.state.showTabBar && this._renderTabBar()}

Или напрямую:

{this.state.showTabBar && (<TabBarExample />)}

Answer 2

Я думаю, что вы должны сделать showTabBar одним из ваших состояний:

getInitialState: function(){
  return{
    showTabBar: {false}
  };
}

и использовать

this.setState({showTabBar:{true}});

обновлять

Answer 3

Вы должны иметь свою логику вне оператора return, как это:

render: function() {
  if (this.state.showTabBar) {
    return (this._renderTabBar());
  } else {
    return (<View />);
  }
}

Также хорошо отметить, что вам всегда нужно будет возвращать компонент, даже если это пустой просмотр.

Вот рабочий пример: https://rnplay.org/apps/-TjJ7w