Question

我目前正在学习本机课程，并且开始为样式部分实现自己的代码。我有一个图标未显示的问题，我似乎找不到问题。我一直在尝试在书架选项卡上实现该图标，但是该图标没有出现在该图标上，并且在博览会上也没有收到错误消息。

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { View, StyleSheet } from 'react-native';
import { Text, Button, Input } from 'react-native-elements';
import {createStackNavigator} from 'react-navigation-stack';
import { Ionicons } from '@expo/vector-icons';


const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
loginFlow: createStackNavigator ({
  Signin: signin,
  Signup: signup,
}),

mainFlow: createBottomTabNavigator({
  Bookcase: bookcase,
  Explore: explore,
  Profile: profile
}, {
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'grey',
    showIcon: true,
  }},
    {
      Bookcase:{
        screen:bookcase,
        navigationOptions:{
          tabBarLabel:'Bookcase',
          tabBarIcon:({ tintColor })=>(
            <Ionicons name="ios-home" color={tintColor} size={2}/>
          )
        }
      }

  }
  )

});

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <AuthProvider>
      <App ref ={(navigator) => {setNavigator(navigator)}} />
    </AuthProvider>
  );
};

Answer 1

如果您使用的是react-navigation v5，则是实现bottomStackNavigation的首选方法。该代码将根据活动状态和非活动状态呈现图标及其颜色。您必须将options属性传递给react-navigation v5中的单个屏幕选项卡。

const BottomNavigator = () => {
  const BottomNavigation = createBottomTabNavigator();

  return (
    <BottomNavigation.Navigator>
      <BottomNavigation.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Exam"
        component={ExamStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="book" color={color} size={size} />
          ),
        }}
      />
    </BottomNavigation.Navigator>
  );
};

底部标签导航器上的expo图标未显示

1 个答案: