Open KBLNY opened 8 years ago
Trying to get this to work too... did you find a solution?
I'm not sure if this will help you, but I fixed my issue by having more than one tab in the Tabs component.
up
import Index from './Home'; import Cart from '../cart/index'; import Account from '../user/my_account'; import Merchant from '../MerchantLogin/home/index'; import CategoriesAll from '../category/Categories'; import Tabs from 'react-native-tabs'; class FooterTabs extends Component { constructor(props) { super(props); this.state = { page: 'home' }; }
renderContent(id) {
switch (id) {
case 'home':
return <Index />
case 'category':
return <CategoriesAll />
case 'cart':
return <Cart />
case 'account':
return <Account />
case 'merchant':
return <Merchant />
default:
return <Index />
}
}
renderTabsActive () { return <Tabs selected={this.state.page} style={{backgroundColor:'white',paddingTop:25}} selectedStyle={{color:'#e73636'}} onSelect={el=>this.setState({page:el.props.name})}> <Col name="home" selectedIconStyle={{Color:'#e73636'}} style={styles.footerTabCol}> <Icon style={this.state.page === 'home' ? styles.activeTab:styles.notactiveTab} name="md-home"/> <Text uppercase={false} style={this.state.page === 'home' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Home
<Col name="cart" style={styles.footerTabCol}>
<Icon style={this.state.page === 'cart' ? styles.activeTab:styles.notactiveTab} name="md-cart"/>
<Text uppercase={false} style={this.state.page === 'cart' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Cart</Text>
</Col>
<Col name={this.state.access === 'branch'? 'merchant':'account'} selectedStyle={{color:'green'}} style={styles.footerTabCol}>
<Icon style={this.state.page === 'account' ? styles.activeTab:styles.notactiveTab} name="md-person"/>
<Text uppercase={false} style={this.state.page === 'account' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Akun</Text>
</Col>
</Tabs>
}
render() {
return (<Container>
{this.renderContent(this.state.page)}
<Footer style={{
height: 45,
paddingTop: null,
paddingBottom: null,
backgroundColor:'#e73636',
justifyContent:'center'
}}>
<FooterTab style={{
backgroundColor: 'white',
height: 45,
borderTopWidth: 0.5,
borderColor: '#f0f0f0',
justifyContent:'center'
}}>
{this.renderTabsActive()}
</FooterTab>
</Footer>
</Container>);
}
} export default connect()(FooterTabs);
Hi, Your
Example
project doesn't work properly, I get the following error:ReferenceError: Can't find variable: require (line1 in the generated bundle)
Do you know why?Additionally, I implement the tab on my own project, work very well in iOS, however, in Android I get the following error:
undefined is not an object (evaluating 'el.props.name')
The error occurred on line 29 of yourindex.js
Thanks for helping