В настоящее время я работаю над книгой рецептов, которая станет подарком моей маме, и, судя по всему, не могу решить эту ошибку. Я попытался также использовать импорт имен для импорта экрана, но это не сработало. Любая помощь будет оценена.
Приложение. 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)
Я использую реагирующую навигацию V2, так как Я также посещаю онлайн-курс.