[英]React Native Navigation TopBar Icons Are Not Showing
刚开始用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)
问题是图标没有显示。
请帮忙。
================================================ ==============
堆栈:Expo、TypeScript、React-native-navigation、React-native-vector-icons、@expo/vector-icons
您需要从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'
/>)
}
尝试在没有大括号的情况下隐式返回:
tabBarIcon: ({focused}) => (
<Ionicons
focused={focused}
...
/>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.