Question

反应导航，navigation.navigate在我的组件中不起作用，并且不显示任何错误。

这是我的导航员shopNavigation组件：

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import {Platform} from 'react-native';

import ProducOverviewScreen from '../screens/shop/ProductOverviewScreen';
import ProductDetailScreen from '../screens/shop/ProductDetailScreen';

import Colors from '../constants/Colors';

const ProductNavigator = createStackNavigator(
  {
    ProductOverview: ProducOverviewScreen,
    ProductDetail: ProductDetailScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: Platform.OS === 'android' ? Colors.primary: '',
      },
      headerTinColor: Platform.OS === 'android' ? 'white' : Colors.primary,
    },
  },
);

export default createAppContainer(ProductNavigator);

这是我要执行导航功能的组件产品概述

import React from 'react';
import {FlatList, Text} from 'react-native';
import {useSelector} from 'react-redux';
import ProductItem from '../../components/shop/ProductItem';
import { withNavigation, navigate } from 'react-navigation';


const ProductOverviewScreen = (props) => {
  const products = useSelector(state => state.products.availableProducts);
  return (
    <FlatList
      data={products}
      keyExtractor={item => item.id}
      renderItem={itemData => (
        <ProductItem
          image={itemData.item.imageUrl}
          title={itemData.item.title}
          price={itemData.item.price}
          onViewDetail={()=> {
           props.navigation.navigate('ProductDetail')
        }}
          onAddToCart={() => {}}
        />
      )}
    />
  );
};

ProductOverviewScreen.navigationOptions = {
  title: 'All Products',
  color: 'white',
  headerTitleStyle: {
    color: 'white',
  },
};

export default ProductOverviewScreen;

反应导航的文档并没有告诉我太多。预先感谢

使用react-navigation导航的React-Native不起作用

0 个答案: