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

请帮助。

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

Stack：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'
 />)
}

Answer 2

尝试不使用大括号隐式返回：

tabBarIcon: ({focused}) => (
<Ionicons
  focused={focused}
...
/>
)

React Native Navigation TopBar图标未显示

2 个答案: