javascript - React Native 导航 TopBar 图标未显示

Question

刚开始用Expo学习React Native，尝试实现顶栏导航。

// screens/Home.tsx

function Home() {
  return (
    <View style={styles.container}>
      <Text>Home Screen!</Text>
    </View>
  )
}

export default Home

// nav/MainTabNavigator.tsx

import {Ionicons} from '@expo/vector-icons'
import HomeScreen from '../screens/Home'

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  }
)

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => {
    <Ionicons
      focused={focused}
      name='md-information-circle'
      size={26}
      style={{marginBottom: -3}}
      color='green'
    />
  }
}

HomeStack.path = ''

const tabNavigator = createMaterialTopTabNavigator({
  HomeStack,
}, {
  tabBarPosition: 'top',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    showLabel: true,
    activeTintColor: 'white',
    style: {
      backgroundColor: 'red'
    }
  }
})

export default tabNavigator

// AppNavigator.tsx

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import MainTabNavigator from './MainTabNavigator'

const AppNavigator = createSwitchNavigator({
  Main: MainTabNavigator
})

export default createAppContainer(AppNavigator)

问题是图标没有显示。

Imgur Link

请帮忙。

================================================== =================

堆栈:Expo、TypeScript、React-native-navigation、React-native-vector-icons、@expo/vector-icons

Answer 1

您需要从 navigationOptions tabBarIcon 返回一个组件。

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => {
      return <TabBarIcon
        focused={focused}
        name='md-information-circle'
     />
  }
}

或

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => (<TabBarIcon
    focused={focused}
    name='md-information-circle'
 />)
}