Question

现在我正在尝试在Expo上创建React Native应用并使用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

该标签可以正常工作，但如果您的意思是没有图标，请尝试

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

Answer 2

请尝试以这种方式实施。这是我的tabNavigator的副本。希望对您有帮助。

fetch("./", { credentials:"include" }).then(/* … */)

Answer 3

我明白了。我已经解决了这个问题。

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

我无法使用反应导航选项卡栏。如何使用？

3 个答案: