从列表视图传递 React 本机状态
Passing Down React Native State from ListView
我在从我的 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;
相关文章:
- 在iOS和Android上使用React native时,我还能使用本机第三方lirbraries吗
- 将事件发送到javascript文档的react本机模块是否正确
- 将对应用内购买的支持构建为react本机代码
- react本机导航器视图不呈现
- react本机AES加密匹配Java解密算法
- compnonentDidMount上的React本机setState不起作用
- React本机项目中的意外令牌
- 将本地 Web 应用包含在 react 本机 Web 视图中
- 在 React 本机中更改分段控件的字体大小
- 通过带有对象子级的数组进行 React 本机映射 - 工作方式与在 react web 中不同
- 从列表视图传递 React 本机状态
- React未考虑本机捆绑包更改
- 渲染时,未定义不是React本机中的对象
- react本机选项卡导航器npm模块在静态proptype中显示意外的令牌
- 映像文件的react本机使用变量
- react本机异步获取,未定义错误
- React Native使用什么来允许JavaScript在iOS和Android上以本机方式执行
- react本机路由器流量遇到两个具有相同密钥的子节点
- 正在尝试将旧的react本机文件更新为0.30
- 如何增加列表视图行滑动的“反应本机滑动”上的按钮宽度(React Native)