我目前正在构建我的第一个react-native应用程序,它是IMDB的简单克隆.我使用NavigatorIOS来管理状态事务并尽可能模块化我的应用程序.
当我尝试从我的库组件转到我的电影组件时发生错误.图书馆列出了用户存储的所有电影,电影组件采用简单的方式获取对象并显示传递的电影的信息.
奇怪的是我从我的搜索组件重用了我的Movie Component,我无法重现异常.
库组件:
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(
{movies[index].title}
{movies[index].year}
)
});
return(
{list}
)
}
};
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 ? SAVE :
DELETE
);
}
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 (
{this.getRowTitle(item)}
{movie[item]}
)
});
return(
{list}
{showSave}
)
}
};
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 ? {this.state.error} :
);
return(
Search for a movie
SEARCH
{showErr}
)
}
};
module.exports = Search;
这是我的应用程序的应用程序流程:
任何帮助将不胜感激.