1.执行命令
yarn add react-native-tab-navigator
2. 导入组件
import TabNavigator from 'react-native-tab-navigator';
3. 实用示例
export default class imooc_gp extends Component {
constructor(props){
super(props);
//状态切换
this.state = {
selectedTab: 'home',
}
}
render() {
return (
<View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={...} />}
renderSelectedIcon={() => <Image source={...} />}
badgeText="1"
onPress={() => this.setState({ selectedTab: 'home' })}>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={...} />}
renderSelectedIcon={() => <Image source={...} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
{profileView}
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
