【问题标题】:The navigation prop is missing for the navigator. in react-navigation you must set up your app container directly导航器缺少导航道具。在 react-navigation 中,您必须直接设置您的应用容器
【发布时间】:2019-11-30 17:49:57
【问题描述】:

我尝试获取我在visual code studio中本地工作的在线代码,但它只能在线工作

这是代码和所有文件的展示,https://snack.expo.io/@git/github.com/israsotomayor/react-native-redux-shopping-cart-count

这是指向我的错误的链接:

shoppingCart.js 文件

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";
import { createStackNavigator } from 'react-navigation-stack'
import HomeScreen from './containers/HomeScreen'
import ElectronicsScreen from './containers/ElectronicsScreen'
import BooksScreen from './containers/BooksScreen'
import ShoppingCartIcon from './containers/ShoppingCartIcon'
import CartScreen from './containers/CartScreen'
class ShoppingCart extends Component {
    render() {
        return (
            <AppStackNavigator />
        );
    }
}
export default ShoppingCart;

const AppStackNavigator = createStackNavigator({
    Home: HomeScreen,
    Electronics: ElectronicsScreen,
    Books: BooksScreen,
    Cart: CartScreen
}, {
        navigationOptions: {
            headerTitle: 'Shopping App',
            headerRight: (
                <ShoppingCartIcon />
            )
        }
    })

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

app.js 文件

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ShoppingCart from './ShoppingCart'
import { Provider } from 'react-redux'
import store from './store'


export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ShoppingCart />
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

【问题讨论】:

    标签: reactjs react-native navigation react-native-android expo


    【解决方案1】:

    刚刚检查过,这个结构应该可以正常工作:

    import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet
    } from "react-native";
    
    import { createAppContainer } from 'react-navigation';
    
    import { createStackNavigator } from 'react-navigation-stack'
    import HomeScreen from './containers/HomeScreen'
    import ElectronicsScreen from './containers/ElectronicsScreen'
    import BooksScreen from './containers/BooksScreen'
    import ShoppingCartIcon from './containers/ShoppingCartIcon'
    import CartScreen from './containers/CartScreen'
    
    const AppStackNavigator = createStackNavigator({
        Home: HomeScreen,
        Electronics: ElectronicsScreen,
        Books: BooksScreen,
        Cart: CartScreen
    }, {
            navigationOptions: {
                headerTitle: 'Shopping App',
                headerRight: (
                    <ShoppingCartIcon />
                )
            }
        })
    
    
    
    export default createAppContainer (AppStackNavigator);
    

    复制粘贴,它应该可以工作!!!

    【讨论】:

    • 为什么要添加多个答案?
    猜你喜欢
    • 2019-05-23
    • 2021-03-09
    • 2021-08-29
    • 2019-09-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-22
    • 2020-05-29
    相关资源
    最近更新 更多