Я не мог использовать панель вкладок реагировать на навигацию.Как это использовать?

Question

Сейчас я пытаюсь создать приложение React Native на Expo и использовать панель вкладок React-Navigation, но не смог.

На самом деле я не получаю никакой ошибки, но этот код ниже не работает.

Нет предупреждения.

import { createBottomTabNavigator, createAppContainer } from 'react-   
        navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import Home from './src/Screens/Home';
import Help from './src/Screens/Help';

const App = createBottomTabNavigator(
 {
  Home: {
  screen: Home,
  defaultNavigationOptions: {
    tabBarIcon: ({ tintColor }) => {
      <Icon name="home" style={{ width: 25, height: 25, tintColor:       
       tintColor}}/>
    },
    title: 'Home',
  },
},
Help: { screen: Help },
},
{
 swipeEnabled: false, //Android用
 tabBarOptions: {
   activeTintColor: '#DE628D',
   inactiveTintColor: '#707070',
 },
},
);

экспорт по умолчанию createAppContainer (App);

Answer 1

Пожалуйста, попробуйте реализовать этот способ.Это копия моего tabNavigator.Надеюсь, это будет полезно для вас.

const TabRouter = createBottomTabNavigator(
  {
    HomeAfterLoginScreen: { screen: A },
    ShowListAlertScreen: { screen: B },
    ShowListProfessionScreen: { screen: C },
    MyAccountScreen: { screen: F }
  },
  {
    tabBarPosition: "bottom",
    tabBarOptions: {
      style: { backgroundColor: "#50bcb8" },
      showIcon: true,
      showLabel: true,
      gesturesEnabled: true,
      indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
      inactiveTintColor: "#fff",
      activeTintColor: "#fff",
      tabStyle: { justifyContent: "center", alignItems: "center" }
    }
  });

Answer 2

Я понял.Я решил эту проблему.

const App = createBottomTabNavigator(
{
 Favorite: {
   screen: FavoriteShops,
   navigationOptions: {
     tabBarLabel: 'お気に入り',
     tabBarIcon: ({ tintColor }) => (
      <Icon name="heart" size={25} color={tintColor} />
    ),
   },
  },
  Home: {
   screen: Home,
   navigationOptions: {
    tabBarLabel: 'ホーム',
    tabBarIcon: ({ tintColor }) => (
      <Icon name="home" size={30} color={tintColor} />
    ),
   },
  },
   Help: {
    screen: Help,
    navigationOptions: {
     tabBarLabel: 'その他',
     tabBarIcon: ({ tintColor }) => (
      <Icon name="bars" size={25} color={tintColor} />
     ),
    },
  },
 },
 {
  swipeEnabled: false, //Android用
   tabBarOptions: {
    showIcon: true,
    showLabel: true,
    activeTintColor: '#DE628D',
    inactiveTintColor: '#707070',
    style: {
     width: '100%',
     height: 70,
   },
    tabStyle: {
     paddingTop: 20,
   },
  },
 },
 );

Answer 3

вкладка работает нормально, но если вы имели в виду, нет значка, попробуйте вместо этого

navigationOptions: {
        tabBarIcon: ({ tintColor, activeTintColor }) => (
          <Icon name="home" size={24} color={tintColor} />)
      },