[英]React Native Navigation TopBar Icons Are Not Showing
Just started learning React Native with Expo, trying to implement a top bar navigation.刚开始用Expo学习React Native,尝试实现一个top bar navigation。
// 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)
The problem is icons are not showing.问题是图标没有显示。
Please help.请帮忙。
================================================================ ================================================ ==============
Stack: Expo, TypeScript, React-native-navigation, React-native-vector-icons, @expo/vector-icons堆栈:Expo、TypeScript、React-native-navigation、React-native-vector-icons、@expo/vector-icons
You need to return a component from navigationOptions
tabBarIcon.您需要从
navigationOptions
tabBarIcon 返回一个组件。
HomeStack.navigationOptions = {
tabBarIcon: ({focused}) => {
return <TabBarIcon
focused={focused}
name='md-information-circle'
/>
}
}
or要么
HomeStack.navigationOptions = {
tabBarIcon: ({focused}) => (<TabBarIcon
focused={focused}
name='md-information-circle'
/>)
}
Try returning implicitly without the curly brackets:尝试在没有大括号的情况下隐式返回:
tabBarIcon: ({focused}) => (
<Ionicons
focused={focused}
...
/>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.