1
votes

Je ne pouvais pas utiliser la barre d'onglets de navigation de réaction. Comment l'utiliser?

Maintenant, j'essaie de créer l'application React Native sur Expo et d'utiliser la barre d'onglets React-Navigation, mais je ne pourrais pas.

En fait, je n'obtiens aucune erreur, mais le code ci-dessous ne fonctionne pas. p >

Pas d'avertissement également.

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

export default createAppContainer (App);

react-native react-navigation

2 commentaires

@ ryonz- Vous pouvez trouver sur le lien avec le code de démonstration: stackoverflow.com/a/54229716/1042817

Pour plus d'informations sur react-navigation . Vérifiez ce dépôt github.com/adityasonel/TheReactApp

3 Réponses :

0
votes

l'onglet fonctionne bien, mais si vous voulez dire qu'il n'y a pas d'icône, essayez plutôt ceci

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

4 commentaires

kamu nak rejoindre x groupe fb programmar emma?

Puis-je savoir, que voulez-vous dire par cela n'a pas fonctionné, à part la partie icône? J'ai essayé de recréer votre tabBar, [ boleh saja @ Fiido93, tapi saya masih baru

kamu dah puissance dalam réagir dikira tau génial.! i satu benda x étude pasal réagir ni. adududu

0
votes

Veuillez essayer de mettre en œuvre de cette façon. Ceci est une copie de mon tabNavigator. J'espère que cela vous sera utile.

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

1 commentaires

Merci pour vos conseils mais cela n'a pas fonctionné. Heureusement, je n'ai aucune erreur mais ne fonctionne pas ...

0
votes

Je l'ai compris. J'ai résolu ce problème.

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

0 commentaires