1-4项目底部导航菜单开发

来源：1-5 项目底部导航菜单开发

慕田峪1131113

2018-04-18

在底部导航菜单开发中，点击底部tabBar：1.页面没有任何改变；2.底部图片以及文字也没有相应的变色；3.页面初始化完成第一个页面的背景色没有添加进去

写回答

1回答

慕田峪1678153

2018-04-22

render() {
return (
<View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'tab_popular'}
selectedTitleColor={{color:'blue'}}
title="最热"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_my.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image, {tintColor:'blue'}]} source={require('./res/images/ic_my.png')}/>}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tab_popular'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tab_trending'}
selectedTitleColor={{color:'green'}}
title="最热"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_favorite.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image, {tintColor:'green'}]} source={require('./res/images/ic_favorite.png')}/>}
onPress={() => this.setState({selectedTab: 'tab_trending'})}>
<View style={styles.page2}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tab_favorite'}
selectedTitleColor={{color:'blue'}}
title="收藏"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_my.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image, {tintColor:'blue'}]} source={require('./res/images/ic_my.png')}/>}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tab_favorite'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tab_my'}
selectedTitleColor={{color:'green'}}
title="我的"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_favorite.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image, {tintColor:'green'}]} source={require('./res/images/ic_favorite.png')}/>}
onPress={() => this.setState({selectedTab: 'tab_my'})}>
<View style={styles.page2}></View>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}

React Native技术精讲与高质量上线App开发

一个真实的上线项目，一次完整的开发过程，全面掌握React Native技术

1577 学习 · 727 问题

查看课程

相似问题

如何动态设置底部导航呢

回答 1

底部菜单的图片有么

回答 1

modal

回答 1

RN开发一个app兼容安卓和苹果跟H5项目是不是独立的？

回答 1

请问老师，Navigator被废弃了怎么办？PS：有教学答疑群吗？

回答 4

打开慕课网App查看更多内容