在“设置”屏幕中缺少 TabBar 查看图标

Question

当我在设置屏幕上时，我看到评论图标（收藏夹）不见了。当我回到审阅屏幕时它会显示。为什么会这样。看我拍的截图。粘贴我项目中的相关代码片段以供参考。

 const MainNavigator = TabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: StackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        })
      }
    }, {
      tabBarPosition: 'bottom',
      tabBarOptions: {
        labelStyle: { fontSize: 12 }
      }
    });

class ReviewScreen extends Component {
  static navigationOptions = props => {
    const {navigation} = props;
    const {navigate} = navigation;
    return {
        tabBarIcon: ({ tintColor }) => {
            return <Icon name="favorite" size={30} color={tintColor} />

        },
        headerTitle: 'Review Jobs',
        headerRight: (
            <Button
                title="Settings"
                onPress={() => navigate('settings')}
                backgroundColor="rgba(0,0,0,0)"
                color="rgba(0, 122, 255, 1)"
            />
        )
    }
  }

在此表示感谢。

Answer 1

您的代码存在问题，因为您将 static navigationOptions 中每个图标的 tintColor 设置为

tabBarIcon: ({tintColor}) => {
        return <Icon name="favorite" size={30} color={tintColor}/>

      }

并且 Settings Screen 有 none，它还需要一个 Icon，因为它在 TabNavigator 中，因此正在呈现 null那里。

因此您需要将 Settings Screen 中的 navigationOptions 设置为

static navigationOptions = props => {
    const {navigation} = props;
    const {navigate} = navigation;
    return {
      tabBarIcon: ({tintColor}) => {
        return <Icon name="favorite" size={30} color={tintColor}/>

      }
    }
  }

或者您可以在 App.js 导航文件中将默认图标添加为

screen: TabNavigator({
        map: { screen: MapScreen,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="favorite" size={30} color={tintColor}/>
                )
            }
        },
// ....so on

希望对您有所帮助！

在“设置”屏幕中缺少 TabBar 查看图标

Missing TabBar Review Icon when in Settings screen

javascript

reactjs

react-native

react-navigation

react-native-navigation