ReactNative进阶：应用 react-native-tab-navigator 实现底部导航栏_react native配置底部菜单栏

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { TabNavigator } from 'react-native-tab-navigator';
 
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
 
class NotificationsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Notifications Screen</Text>
      </View>
    );
  }
}
 
class MessagesScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Messages Screen</Text>
      </View>
    );
  }
}
 
export default class App extends React.Component {
  render() {
    return (
      <TabNavigator>
        <TabNavigator.Item
          title="Home"
          renderIcon={() => <Image source={require('./img/home.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./img/home.png')} style={[styles.iconStyle, {tintColor: 'red'}]} />}
          badgeText="1"
          selected={true}
          onPress={() => this.props.navigator.push({screen: 'Home'})}>
          <HomeScreen navigator={this.props.navigator} />
        </TabNavigator.Item>
        <TabNavigator.Item
          title="Notifications"
          renderIcon={() => <Image source={require('./img/notifications.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./img/notifications.png')} style={[styles.iconStyle, {tintColor: 'red'}]} />}
          onPress={() => this.props.navigator.push({screen: 'Notifications'})}>
          <NotificationsScreen navigator={this.props.navigator} />
        </TabNavigator.Item>
        <TabNavigator.Item
          title="Messages"
          renderIcon={() => <Image source={require('./img/messages.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./img/messages.png')} style={[styles.iconStyle, {tintColor: 'red'}]} />}
          onPress={() => this.props.navigator.push({screen: 'Messages'})}>
          <MessagesScreen navigator={this.props.navigator} />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}
 
const styles = StyleSheet.create({
  iconStyle: {
    width: 2