react-native – 在React Native中,TabBarBottom不显示图标/图像

发布时间：2020-12-15 20:41:50 所属栏目：百科来源：网络整理

导读：我几乎从TabNavigator文档中获取了示例代码,而图标/图像根本没有出现在iOS或 Android上.即使标签覆盖似乎也没有生效.我究竟做错了什么？这是我一直在使用的文档的链接： https://reactnavigation.org/docs/navigators/tab 这是我的代码： class MyHomeScree

我几乎从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,};

  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,tintColor: tintColor}}
            />)
          },...

要么

class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',tabBar: {
            icon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26,tintColor: tintColor}}
              />
            ),}
      };
 ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!