Question

我目前正在制作一本食谱书，这将是对我妈妈的礼物，对于我一生，我似乎无法解决这个错误。我也尝试过使用名称导入来导入屏幕，但是它没有用。任何帮助将不胜感激。

App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import IonIcons from 'react-native-vector-icons/FontAwesome'
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
import {Provider} from 'react-redux'
import { PersistGate } from 'redux-persist/lib/integration/react'
import {store, persistor} from './redux/store'

import SearchScreen from './screens/SearchScreen'

const SearchNavigator = createStackNavigator({
    SearchScreen: SearchScreen,
    // ResulstScreen: ResultsScreen,
    // DetailsScreen: DetailsScreen,
  }, 
  {
    initialRouteName: 'SearchScreen',
  }
)

const AppNavigator = createBottomTabNavigator({
  Search: {
    screen: SearchNavigator,
    navigationOptions: {
      tabBarLabel: 'Search',
      tabBarIcon: ({tintcolor}) => (
        <IonIcons name='search' size={25} color={tintcolor}/>
      ),
    }
  },
  // Favorites: {
  //   screen: FavoritesScreen,
  //   navigationOptions: {
  //     tabBarLabel: 'favorites',
  //     tabBarIcon: ({ focused, tintcolor }) => (
  //       <IonIcons name='star-o' color='yellow' />
  //     )
  //   }
  // }
})

export default class App extends React.Component {
  render() {
    return(
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null}>
          <AppNavigator />
        </PersistGate>
      </Provider>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

SearchScreen.js：

import React from 'react'
import { TextInput, KeyboardAvoidingView, StyleSheet, TouchableOpacity, View } from 'react-native'
import { Dropdown } from 'react-native-material-dropdown'
import {connect} from 'react-redux'

import {getRecipes} from '../redux/actions'

class SearchScreen extends React.Component {
    state = {
        meal: '',
        ingredient: '',
        category: '',
        area: '',
    }

    categories = [{"value": "none"},{"value":"Beef"},{"value":"Breakfast"},{"value":"Chicken"},{"value":"Dessert"},{"value":"Goat"},{"value":"Lamb"},{"value":"Miscellaneous"},{"value":"Pasta"},{"value":"Pork"},{"value":"Seafood"},{"value":"Side"},{"value":"Starter"},{"value":"Vegan"},{"value":"Vegetarian"}]
    areas = [{"value": "none"},{"value":"American"},{"value":"British"},{"value":"Canadian"},{"value":"Chinese"},{"value":"Dutch"},{"value":"Egyptian"},{"value":"French"},{"value":"Greek"},{"value":"Indian"},{"value":"Irish"},{"value":"Italian"},{"value":"Jamaican"},{"value":"Japanese"},{"value":"Kenyan"},{"value":"Malaysian"},{"value":"Mexican"},{"value":"Moroccan"},{"value":"Russian"},{"value":"Spanish"},{"value":"Thai"},{"value":"Tunisian"},{"value":"Turkish"},{"value":"Vietnamese"}]

    handleMealChange = meal => {
        this.setState({meal})
    }
    handleIngredientChange = ingredient => {
        this.setState({ingredient})
    }
    handleDropdownChange = key => val => {
        this.setState({[key]: val})
    }

    handleSubmit = async () => {
        const recipes = await this.props.getRecipes(this.state.meal, this.state.ingredient. this.state.area, this.state.category)
        console.log(recipes)
    }

    handleAreaChange = this.handleDropdownChange('area')
    handleCategoryChange = this.handleDropdownChange('category')

    return() {
        render(
            <View style={{flex: 1, justifyContent: 'center'}}>
                <Text>In here you choose the information on the meal you want to lookup. You can only search for one of the options at a time. If you want to unselect an area or category (like before you clicked it) just choose the none value</Text>
                <KeyboardAvoidingView behavior='padding' style={styles.RowView}>
                    <TextInput 
                    onChangeText={this.handleMealChange}
                    value={this.state.meal} 
                    placeholder={'Here goes the name of the meal you would like to look up'}
                    editable={!this.state.ingredient || !(this.state.category === "none") || !(this.state.area === "none")}
                    style={styles.keyboard}
                    />
                    <TextInput 
                    onChangeText={this.handleIngredientChange}
                    value={this.state.ingredient} 
                    placeholder={'Here goes the name of the main ingredient your meals should have'}
                    editable={this.state.meal || !(this.state.category === "none") || !(this.state.area === "none")}
                    style={styles.keyboard}
                    />
                    <Text></Text>
                </KeyboardAvoidingView>
                <View style={styles.RowView}>
                    <Dropdown 
                    data={this.categories}
                    label={'Available categories'}
                    containerStyle={styles.dropdown}
                    onChangeText={this.handleCategoryChange}
                    disabled={this.state.ingredient || this.state.meal || !(this.state.area === "none")}
                    />
                    <Dropdown 
                    data={this.areas}
                    label={'Available areas or regions'}
                    containerStyle={styles.dropdown}
                    onChangeText={this.handleAreaChange}
                    disabled={this.state.ingredient || this.state.meal || !(this.state.category === "none")}
                    />
                </View>
                <TouchableOpacity onPress={this.handleSubmit} disabled={!this.state.meal && !this.state.ingredient && (this.state.area === '' || this.state.area === 'none') && (this.state.category === '' || this.state.area === 'none')}>
                    <Text style={{alignSelf: 'center', color: 'blue'}}>Search</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
styles = StyleSheet.create({
    RowView: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'stretch',
        paddingTop: 30,
    },
    keyboard: {
        borderWidth: 1,
        minWidth: 50,
        borderRadius: 3,
        marginTop: 20,
    },
    dropdown: {
        backgroundColor: 'orange'
    }
})

export default connect(null, {getRecipes})(SearchScreen)

我正在使用React Navigation V2，因为我也在关注在线课程。

Answer 1

我刚刚将我的react-redux版本更新为7.2.0，并且有效

使用react-redux时，“路线组件必须是React组件”

1 个答案: