Question

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

当我尝试从库组件中转到电影组件时发生错误。图书馆列出了用户存储的所有电影，电影组件采用简单的方式拍摄对象，并显示传递的电影的信息。

奇怪的是，我重新使用搜索组件中的电影组件，我无法重现该异常。

图书馆组件：

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;

以下是我的应用的应用流程：

任何帮助将不胜感激。

Answer 1

最后想出来！

我的愚蠢错误。

解决方案是从电影组件中删除对库组件的要求。删除该行后，错误消失了。您似乎不能要求转换的相同组件，如果您这样做，代码将会中断。

Answer 2

我收到了这个错误，因为我注册了两次组件。

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

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

2 个答案: