当前位置:  开发笔记 > IOS > 正文

不变违规:元素类型无效:期望一个字符串但得到:object.检查'NavigatorIOS'的渲染方法

如何解决《不变违规:元素类型无效:期望一个字符串但得到:object.检查'NavigatorIOS'的渲染方法》经验,为你挑选了0个好方法。

我目前正在构建我的第一个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;

这是我的应用程序的应用程序流程:

申请流程 任何帮助将不胜感激.

推荐阅读
虎仔球妈_459
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有