7
की रेंडर विधि देखें, मैं वर्तमान में अपना पहला प्रतिक्रिया-मूल अनुप्रयोग बना रहा हूं, जो आईएमडीबी का एक साधारण क्लोन है। मैं राज्य लेनदेन का प्रबंधन करने के लिए नेविगेटरआईओएस का उपयोग कर रहा हूं और जितना संभव हो सके मॉड्यूलर के रूप में अपना आवेदन बना रहा हूं।Invariant उल्लंघन: तत्व प्रकार अमान्य है: एक स्ट्रिंग की उम्मीद है लेकिन मिला: वस्तु। 'नेविगेटरआईओएस'
त्रुटि तब होती है जब मैं अपने लाइब्रेरी घटक से मेरी मूवी घटक पर जाने के लिए प्रयास करें। लाइब्रेरी में उन सभी फिल्में सूचीबद्ध हैं जिन्हें उपयोगकर्ता ने संग्रहीत किया है और मूवी घटक सरल होता है, ऑब्जेक्ट लेता है और मूवी की जानकारी को प्रदर्शित करता है।
अजीब बात यह है कि मैंने अपने खोजें घटक मेरी मूवी घटक पुन: उपयोग और मैं अपवाद पुन: पेश करने में असमर्थ हूँ है।
लाइब्रेरी घटक:
var React = require('react-native');
var Separator = require('../Helpers/Separator');
var Movie = require('../Movie');
var {
Text,
StyleSheet,
View,
ScrollView,
TouchableHighlight,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
},
rowContainer: {
flexDirection: 'column',
flex: 1,
padding: 10
},
name: {
color: '#48BBEC',
fontSize: 18,
paddingBottom: 5
},
year: {
color: '#48BBEC',
fontSize: 14,
paddingBottom: 5
},
description: {
fontSize: 14,
paddingBottom: 5
}
});
class Library extends React.Component{
selectFilm(selectedMovie){
this.props.navigator.push({
title: selectedMovie.Title,
component: Movie,
passProps: { movie: selectedMovie, canSave: false, isAuthenticated: true }
});
}
render(){
var movies = this.props.movies;
var list = movies.map((item, index) => {
return(
<View key={index}>
<View style={styles.rowContainer}>
<TouchableHighlight
onPress={this.selectFilm.bind(this, movies[index])}
underlayColor='transparent'>
<Text style={styles.name}>{movies[index].title}</Text>
</TouchableHighlight>
<Text stlye={styles.year}>{movies[index].year}</Text>
</View>
<Separator />
</View>
)
});
return(
<ScrollView style={styles.container}>
{list}
</ScrollView>
)
}
};
Library.propTypes = {
movies: React.PropTypes.array.isRequired
};
module.exports = Library;मूवी घटक:
var React = require('react-native');
var Badge = require('./Badge.js');
var Library = require('./User/Library.js');
var Separator = require('./Helpers/Separator');
var api = require('../Utils/api');
var {
StyleSheet,
Image,
Text,
View,
ScrollView,
TouchableHighlight,
AsyncStorage
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
rowContainer: {
padding: 10
},
rowTitle: {
color: '#48BBEC',
fontSize: 16
},
rowContent: {
fontSize: 19
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: '#758BF4',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 0,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
class Movie extends React.Component{
componentDidMount() {
AsyncStorage.getItem("token").then((value) => {
this.setState({"token": value});
}).done();
}
getRowTitle(title){
return title[0] ? title[0].toUpperCase() + title.slice(1): title;
}
getTitle(item){
return item[0] ? item[0].toUpperCase() + item.slice(1) : item;
}
handleSubmit(){
api.addMovie(this.state.token, this.props.movie)
.then((res) => {
console.log(res);
if (res === 'Film already exists') {
alert('Film already exists');
} else {
alert('SAVED');
}
});
}
handleDelete(){
api.deleteMovie(this.props.movie.imdbID)
.then((res) => {
this.props.navigator.pop();
});
}
render(){
var showSave;
if (this.props.isAuthenticated) {
showSave = (
this.props.canSave ? <TouchableHighlight style={styles.button} onPress={this.handleSubmit.bind(this)} underlayColor="#48BBEC"><Text style={styles.buttonText}> SAVE </Text></TouchableHighlight> :
<TouchableHighlight style={styles.button} onPress={this.handleDelete.bind(this)} underlayColor="#48BBEC"><Text style={styles.buttonText}>DELETE </Text></TouchableHighlight>
);
}
var movie = this.props.movie;
var topicArr = ['director', 'year', 'rated', 'plot', 'country', 'awards', 'imdbRating'];
var list = topicArr.map((item, index) => {
if (!movie[item]) {
item = this.getTitle(item);
}
return (
<View key={index}>
<View style={styles.rowContainer}>
<Text style={styles.rowTitle}>{this.getRowTitle(item)}</Text>
<Text style={styles.rowContent}> {movie[item]} </Text>
</View>
<Separator />
</View>
)
});
return(
<ScrollView style={styles.container}>
<Badge movie={this.props.movie} />
{list}
{showSave}
</ScrollView>
)
}
};
Movie.propTypes = {
movie: React.PropTypes.object.isRequired
};
module.exports = Movie;खोजें घटक:
किसी भी मदद की बहुत सराहना की जाएगी:
var React = require('react-native');
var Movie = require('./Movie');
var api = require('../Utils/api');
var {
Text,
View,
TextInput,
TouchableHighlight,
StyleSheet,
ActivityIndicatorIOS,
AsyncStorage
} = React;
var styles = StyleSheet.create({
// Styles
});
class Search extends React.Component{
constructor(props){
super(props);
this.state = {
title: '',
isLoading: false,
token: ''
}
}
componentDidMount() {
AsyncStorage.getItem("token").then((value) => {
this.setState({"token": value});
}).done();
}
handleChange(event){
this.setState({
title: event.nativeEvent.text
});
}
handleSubmit(){
var isAuthenticated = this.state.token !== null ? true : false;
this.setState({
isLoading: true
});
api.findMovie(this.state.title)
.then((res) => {
if (!res.Response) {
this.setState({
error: 'Movie not found',
isLoading: false
});
} else {
this.props.navigator.push({
title: res.Title,
component: Movie,
passProps: {movie: res, canSave: true, isAuthenticated: isAuthenticated}
});
this.setState({
isLoading: false,
error: false,
title: ''
})
}
});
}
render(){
var showErr = (
this.state.error ? <Text>{this.state.error}</Text> : <View></View>
);
return(
<View style={styles.mainContainer}>
<Text style={styles.title}>Search for a movie</Text>
<TextInput
style={styles.searchInput}
value={this.state.title}
onChange={this.handleChange.bind(this)} />
<TouchableHighlight
style={styles.button}
onPress={this.handleSubmit.bind(this)}
underlayColor="white">
<Text style={styles.buttonText}> SEARCH </Text>
</TouchableHighlight>
<ActivityIndicatorIOS
animating={this.state.isLoading}
color= "#111"
size="large">
</ActivityIndicatorIOS>
{showErr}
</View>
)
}
};
module.exports = Search;यहाँ मेरी एप्लिकेशन के आवेदन प्रवाह है।
क्योंकि खोज से आने पर यह त्रुटि नहीं होती है, मुझे लगता है कि यह घटक भी देखकर सहायक होगा। आम तौर पर, मैं सुझाव देता हूं कि हार्ड कोडित बिट्स के साथ गतिशील बिट्स को प्रतिस्थापित करें, क्या आप इस मुद्दे को अलग कर सकते हैं। NavigatotIOS को पारित होने वाले प्रोपों में से एक वास्तव में –
स्ट्रिंग के बजाय एक वस्तु है धन्यवाद, मैंने खोज घटक के लिए कोड जोड़ा। मैंने सभी प्रोप को हार्डकोड किया और यह अभी भी मुझे एक ही त्रुटि दे रहा है। – gonzalovazzquez