从列表视图传递 React 本机状态

Passing Down React Native State from ListView

本文关键字:React 本机 状态 列表 视图      更新时间:2023-09-26

我在从我的 React Native ListView 传递状态时遇到问题。

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

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

下面是正在呈现的列表视图

    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为 true 时,将调用较早的 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>
          );
    }

让它工作了! 在 onPress 中,我需要这样称呼它。

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

并带走这个

this.movie = movie;