Question

我不希望更改导航，仅更改图标。因此，我可以拦截按钮的按下并阻止导航，但是我一直无法弄清楚如何更改图标。我想从播放更改为暂停。

显示图标的导航选项：

this.props={isPlaying:false}

const PlayStack = createStackNavigator({
  Play: PlayScreen,
});

PlayStack.navigationOptions = {
  tabBarLabel: ' ',
  tabBarIcon: () => (
    <PlayTabBarIcon
      name={Platform.OS === 'ios' ? (this.props.isPlaying ? 'ios-pause' : 'ios-play') : (this.props.isPlaying ? 'md-pause' : 'md-play') }
    />
  ),
  tabBarOnPress: (tab, jumpToIndex) => {
    this.props.isPlaying = !this.props.isPlaying;
    console.log(tab);
  }
};

这是PlayTabBarIcon类

import React from 'react';
import { Icon } from 'expo';
import { Platform } from 'react-native';
import Colors from '../constants/Colors';

export default class PlayTabBarIcon extends React.Component {
  render() {
    return (
      <Icon.Ionicons
        name={this.props.name}
        size={46}
        style={{ marginBottom: -3 }}
        color={Colors.green}
      />
    );
  }
}

Answer 1

我无法从tabBarOnPress的{{1}}方法中找出方法，但是我确实设法获得了组件内部所需的功能。组件创建更改为：

navigationOption

，组件更改为：

const PlayStack = createStackNavigator({
  Play: PlayScreen,
});

PlayStack.navigationOptions = {
  tabBarLabel: ' ',
  tabBarIcon: () => (
    <PlayTabBarIcon
      playName={Platform.OS === 'ios' ? 'ios-play' : 'md-play' }
      pauseName={Platform.OS === 'ios' ? 'ios-pause' : 'md-pause' }
      isPlaying={false}
    />
  )
};

Answer 2

tabBarIcon: ({focused }) => (    
    <Image resizeMode='cover' source={focused ? "Image URL Here": ""Image URL Here""} />
)

焦点参数返回布尔值（此焦点参数检查是否将焦点对准选项卡。如果焦点对准，则返回true；如果焦点不对准，则返回false）

如何更改onTabPress上的React Native底部标签栏图标的图像？

2 个答案: