时间戳

首页 > 解决方案 > React Native - 标题右侧图标不会显示

react-native - React Native - 标题右侧图标不会显示

问题描述

嗨，我在放置右标题图标时遇到问题，请告知如何解决。我收到错误“变量 - 导航”未找到。在其他屏幕上，我放了“静态 navigationOptions = ({ navigation }) => { 并且它正在工作。

from 'react-native'
import { UIActivityIndicator } from 'react-native-indicators'
import { CardStyleInterpolators } from 'react-navigation-stack'
import { withNavigation } from 'react-navigation'
import { ActionSheet, Picker, Icon } from 'native-base'
import { connect } from 'react-redux'
import WooComFetch, { getUrl } from '../common/WooComFetch'
import FlatListViewShop from '../common/FlatListViewShop'
import SyncStorage from 'sync-storage'
import themeStyle from '../common/Theme.style'
import ShoppingCartIcon from '../common/ShoppingCartIcon'
import Spinner from 'react-native-loading-spinner-overlay'
import { createSelector } from 'reselect'
const CANCEL_INDEX = 9
const WIDTH = Dimensions.get('window').width
class Newest extends PureComponent {
  **static navigationOptions = props => {**
    const headerStyle = props.navigation.getParam('headerTitle')
    return {
      headerTitle: headerStyle,
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      headerStyle: {
        backgroundColor: themeStyle.primary
      },
      headerTitleAlign: 'center',
      headerForceInset: { top: 'never', vertical: 'never' },
      headerTintColor: themeStyle.headerTintColor,
      gesturesEnabled: false,
      headerTitleStyle: {
        fontWeight: Platform.OS === 'android' ? 'bold' : 'normal'
      },
      gesturesDirection: 'inverted',
      headerRight: () => <ShoppingCartIcon navigation={navigation} />,
      headerLeft: (
        <Icon
          onPress={() => props.navigation.pop()}
          name={!I18nManager.isRTL ? 'arrow-back' : 'arrow-forward'}
          style={{
            color: themeStyle.primaryContrast,
            fontSize: 25,
            padding: 5,
            paddingLeft: 16,
            paddingRight: 16,
            marginRight: 16
          }}
        />
      )
    }
  }

标签： react-native

解决方案

你在这里缺少道具。

 headerRight: () => <ShoppingCartIcon navigation={navigation} />,

这应该是

 headerRight: () => <ShoppingCartIcon navigation={props.navigation} />,

推荐阅读