知道{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);
答案 0 :(得分:2)
此外,您可以这样做,而不是三元:
{this.state.showTabBar && this._renderTabBar()}
或直接:
{this.state.showTabBar && (<TabBarExample />)}
答案 1 :(得分:1)
我认为你应该让showTabBar成为你的一个州:
getInitialState: function(){
return{
showTabBar: {false}
};
}
并使用
this.setState({showTabBar:{true}});
更新
答案 2 :(得分:1)
你应该在return语句之外使用你的逻辑:
render: function() {
if (this.state.showTabBar) {
return (this._renderTabBar());
} else {
return (<View />);
}
}
同样值得注意的是,即使它是一个空白视图,您也总是需要返回一个组件。
以下是工作示例:https://rnplay.org/apps/-TjJ7w