Question

我在React Native ListView中传递状态时遇到了麻烦。

我目前正在尝试扩展此处教程的功能。 https://facebook.github.io/react-native/docs/tutorial.html#content

我想添加按任何电影的功能，并获取更多相关信息。

这是正在呈现的ListView

    renderMovie(movie) {
        this.movie = movie;
        return (
          <View
          style={styles.container}
          >
            <Image
              source={{uri: movie.posters.thumbnail}}
              style={styles.thumbnail}
            />
            <TouchableHighlight style={styles.rightContainer} onPress={this._onPressMovie.bind(this)}>
              <View>
                <Text style={styles.title}>{movie.title}</Text>
                <Text style={styles.year}>{movie.year}</Text>
              </View>
            </TouchableHighlight>
          </View>
        );
      }

onPress发生时会触发

    _onPressMovie(){
        this.setState({ showMovieInfo: !this.state.showMovieInfo, movie: this.movie});
    }

当this.state.showMovieInfo为真时，会调用更早的if语句

    render() {

        if(!this.state.loaded) {
          return this.renderLoadingView();
        }

        if(this.state.showMovieInfo) {
          return this.renderMovieInfo()
        }

        return (
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie.bind(this)}
            style={styles.listView}/>
        );
      };

不是传递按下的电影信息，而是将最后一部电影传递到此处。

    renderMovieInfo() {
        return (
          <TouchableHighlight style={styles.container} onPress={this._onPressMovieInfo.bind(this)}>
            <View>
              <MovieInfo {...this.state}/>
            </View>
          </TouchableHighlight>
          );
    }

Answer 1

搞定了！在onPress我需要这样称呼它。

onPress ={() => this.onPressMovie(movie)}

并带走这个

this.movie = movie;

从ListView传递React Native State

1 个答案: