react-native – 不变违规：元素类型无效：期望一个字符串但得到：object.检查’NavigatorIOS’的渲染方法

我目前正在构建我的第一个react-native应用程序,它是IMDB的简单克隆.我使用Navigator IOS来管理状态事务并尽可能模块化我的应用程序.

当我尝试从我的库组件转到我的电影组件时发生错误.库列出了用户存储的所有电影,电影组件采用简单的方式获取对象并显示传递的电影的信息.

奇怪的是我从我的搜索组件重用了我的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,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,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
  },color: '#111',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,TextInput,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,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;

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

任何帮助将不胜感激.

终于明白了！

我的愚蠢错误.

解决方案是从Movie Component中删除Library Component的需求.删除该行后,错误就消失了.您似乎不能要求转换的相同组件,如果您这样做,您的代码将会中断.