我几乎从 TabNavigator 文档中获取了示例代码,并且图标/图像根本不会出现在 iOS 或 Android 上。甚至标签覆盖似乎也没有生效。我做错了什么?
这是我一直在使用的文档的链接:
https://reactnavigation.org/docs/navigators/tab
这是我的代码:
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Not displayed',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
最佳答案
好吧,我想把脸撞到键盘上后终于想通了。
标题和标签栏图标实际上与文档中的结构不同。
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
或
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
关于react-native - 在 React Native 中,图标/图像不会与 TabBarBottom 一起显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43555419/