react-native-tab-navigator的简单实用

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>
    );
  }
}