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

像Gortem说的那样，你不是在调用这个函数。 React不会为你做这件事。

此外，您可以这样做，而不是三元：

{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

无法在React Native中基于this.state进行渲染

3 个答案: