React Native (Netflix app) Android 构建错误 - “在 Connect(App) 的上下文或道具中找不到‘商店’”

Question

我正在尝试使用来自https://github.com/mariodev12/react-native-netflix 的这个 GitHub 项目制作类似于“Netflix”应用程序的 android 构建。由于它是一个 React Native 项目，它在 iOS 中运行良好。但是在进行 android build 时，会导致以下错误： 'Could not find 'store' in either context or props of "Connect(App)" 要么将根组件包装在或将“store”作为道具显式传递给“Connect(App)”

index.android.js的代码如下：

import { AppRegistry } from 'react-native';
import App from './src/app'
AppRegistry.registerComponent('NetflixApp', () => App);

而 App.js 是：

import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet
} from 'react-native'

import {connect} from 'react-redux'

import Header from './components/Header'
import List from './components/List'
import Menu from './components/Menu'
import Slide from './components/Slider'
import Genres from './components/Genres'

import SideMenu from 'react-native-side-menu'

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpen: false,
            itemSelected: 'Home'
        }
        this.getTwoRows = this.getTwoRows.bind(this)
        this.itemSelected = this.itemSelected.bind(this)
    }

    static navigationOptions = {
        headerVisible: false
    }

    toggle(){
        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    itemSelected(item){
        this.setState({
            itemSelected: item,
            isOpen: false
        })
    }

    updateMenu(isOpen){
        this.setState({isOpen})
    }

    getTwoRows(){
        const {shows} = this.props
        const array = shows.slice(0)
        const val = Math.floor(array.length / 2)
        const newArray = array.splice(0, val)
        return [
            array,
            newArray
        ]
    }

    render(){
        return (
            <View style={{flex: 1}}>
                <SideMenu
                    menu={<Menu 
                        navigation={this.props.navigation}
                        itemSelected={this.itemSelected} 
                        itemSelectedValue={this.state.itemSelected}
                    />}
                    isOpen={this.state.isOpen}
                    onChange={(isOpen) => this.updateMenu(isOpen)}
                    style={{flex: 1}}
                >
                    <View style={[{flex: 1}, styles.container]}>
                        <Header navigation={this.props.navigation} toggle={this.toggle.bind(this)} />
                        {this.state.itemSelected == 'Home' ? <View style={{flex: 1}}>
                            <Slide />
                            <List
                                getTwoRows={this.getTwoRows} 
                                navigation={this.props.navigation}
                            />
                        </View> : 
                        <Genres
                            navigation={this.props.navigation} 
                            item={this.state.itemSelected}
                        />}
                    </View>
                </SideMenu>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'black'
    }
})

export default connect(state => ({shows: state.shows}))(App)

过去一周我一直在为此苦苦挣扎。你能帮我解决这个问题吗？谢谢。

Answer 1

Android 和 iOS 索引指向不同的应用文件。此错误消息是由于缺少为 app.js 文件提供的提供程序而导致的。您可以尝试使用 Provider 包装您的返回内容，就像设置 index.js 文件一样。

Answer 2

您缺少创建 redux 存储并使用 Provider 将其提供给组件的部分。查看Redux docs 了解更多信息。

import { AppRegistry } from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './src/app'

const store = createStore(/* your reducers / middleware */);

const AppWithStore = () => (
  <Provider store={store}>
    <App />
  </Provider>
)

AppRegistry.registerComponent('NetflixApp', () => AppWithStore);