Question

我试图将图标分配给底部导航，但是我已经创建了堆栈导航并将其呈现给底部导航。由于我是React Native的新手，请帮助我。而且我不想使用createMaterialBottomNavigator

import React from "react";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
import { Icon } from "native-base";
import DoctorHome from "../containers/Home/DoctorHome/DoctorHome";
import Appointments from "../containers/DoctorFlow/Appointments/Appointments";
import EditProfile from "../containers/DoctorFlow/EditProfile/EditProfile";
import ViewClinic from "../containers/DoctorFlow/ViewClinic/ViewClinic";
import AddClinic from "../containers/DoctorFlow/AddClinic/AddClinic";
import Profile from "../containers/DoctorFlow/Profile/Profile";
import Proffession from "../containers/DoctorFlow/Profile/Proffession";
import Login from "../containers/Login/Login";
import SignUp from "../containers/SignUp/SignUp";
// import Splash from "../containers/SplashScreen";
import {
  View,
  Image,
  Touchable,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform
} from "react-native";

  const HomeStack = createStackNavigator ({
    Home: DoctorHome,
    Appointments: Appointments,
    EditProfile: EditProfile
  });
  const ClinicStack = createStackNavigator ({
    Clinic: ViewClinic,
    AddClinic: AddClinic
  });
  const ProfileStack = createStackNavigator ({
    Profile: Profile,
    EditProfile: EditProfile,
    Proffession: Proffession
  });
  const LoginStack = createStackNavigator ({
    Login: Login,
    SignUp: SignUp
  });
  const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Clinic: ClinicStack,
    Profile: ProfileStack,
    Login: LoginStack
});

export const AppNavigator = createAppContainer(MainNavigator);

Answer 1

请参考以下代码，将图标分配给底部导航。

 import React from 'react';
    import { Text, View } from 'react-native';
    import { Ionicons } from '@expo/vector-icons'; // 6.2.2
    import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

    class HomeScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
          </View>
        );
      }
    }

    class SettingsScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
          </View>
        );
      }
    }

    class IconWithBadge extends React.Component {
      render() {
        const { name, badgeCount, color, size } = this.props;
        return (
          <View style={{ width: 24, height: 24, margin: 5 }}>
            <Ionicons name={name} size={size} color={color} />
            {badgeCount > 0 && (
              <View
                style={{
                  // /If you're using react-native < 0.57 overflow outside of the parent
                  // will not work on Android, see https://git.io/fhLJ8
                  position: 'absolute',
                  right: -6,
                  top: -3,
                  backgroundColor: 'red',
                  borderRadius: 6,
                  width: 12,
                  height: 12,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
                  {badgeCount}
                </Text>
              </View>
            )}
          </View>
        );
      }
    }

    const HomeIconWithBadge = props => {
      // You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
      return <IconWithBadge {...props} />;
    };

    const getTabBarIcon = (navigation, focused, tintColor) => {
      const { routeName } = navigation.state;
      let IconComponent = Ionicons;
      let iconName;
      if (routeName === 'Home') {
        iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        // We want to add badges to home tab icon
        IconComponent = HomeIconWithBadge;
      } else if (routeName === 'Settings') {
        iconName = `ios-options${focused ? '' : '-outline'}`;
      }

      // You can return any component that you like here!
      return <IconComponent name={iconName} size={25} color={tintColor} />;
    };

    export default createAppContainer(
      createBottomTabNavigator(
        {
          Home: { screen: HomeScreen },
          Settings: { screen: SettingsScreen },
        },
        {
          defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) =>
              getTabBarIcon(navigation, focused, tintColor),
          }),
          tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
          },
        }
      )
    );

提供图标以进行React Stack导航

1 个答案: