底部导航组件组件react-native-tab-navigator的使用

import React from 'react';
import { View, Text, Image } from 'react-native';
import { TabNavigator } from 'react-native-tab-navigator';
 
class MyHomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
 
class MyNotificationsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Notifications Screen</Text>
      </View>
    );
  }
}
 
class MyMessagesScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <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={{ width: 25, height: 25 }} />}
          renderSelectedIcon={() => <Image source={require('./img/home.png')} style={{ width: 25, height: 25 }} />}
          badgeText="1"
          selected={true}
          onPress={() => this.props.navigation.navigate('Home')}>
          <MyHomeScreen />
        </TabNavigator.Item>
        <TabNavigator.Item
          title="Notifications"
          renderIcon={() => <Image source={require('./img/notifications.png')} style={{ width: 25, height: 25 }} />}
          renderSelectedIcon={() => <Image source={require('./img/notifications.png')} style={{ width: 25, height: 25 }} />}
          onPress={() => this.props.navigation.navigate('Notifications')}>
          <MyNotificationsScreen />
        </TabNavigator.Item>
        <TabNavigator.Item
          title="Messages"
          renderIcon={() => <Image source={require('./img/messages.png')} style={{ width: 25, height: 25 }} />}
          renderSelectedIcon={() => <Image source={require('./img/messages.png')} style={{ width: 25, height: 25 }} />}
          onPress={() => this.props.navigation.navigate('Messages')}>
          <MyMessagesScreen />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

这个代码实例展示了如何在React Native应用中使用\`react-native-ta