React native 在同一页面上执行两个不同操作时,如何处理MapStateTops()函数?
经过两天的研究,希望我能在这里找到答案 我正在调用API来检索电影列表。电影将显示在称为“新电影”的视图中 在这个视图中,我有两种可能:点击心形图标将一部电影作为最爱,然后点击蓝色按钮,上面写着我看过这部电影 为此,我使用react redux。 直到现在,当我把一部电影作为我最喜欢的作品;状态更改请参见MapStateTrops功能,我通过单击下面导航栏的选项卡来检索此影片请参见附件 现在,当我点击我看到这部电影的按钮时,我尝试在同一类电影细节上做大致相同的事情,除了电影将出现在“观看”选项卡中,而不是“查看附件” 所以我的问题是如何在同一个类中创建另一个MapStateTops来更改状态并使影片显示在“已看到”选项卡中 我试图在componentDidMount函数中执行这些操作,但没有成功。 也许有一个我还不知道的react redux的概念 这是它用于收藏夹页面的完整代码React native 在同一页面上执行两个不同操作时,如何处理MapStateTops()函数?,react-native,react-redux,react-native-navigation,React Native,React Redux,React Native Navigation,经过两天的研究,希望我能在这里找到答案 我正在调用API来检索电影列表。电影将显示在称为“新电影”的视图中 在这个视图中,我有两种可能:点击心形图标将一部电影作为最爱,然后点击蓝色按钮,上面写着我看过这部电影 为此,我使用react redux。 直到现在,当我把一部电影作为我最喜欢的作品;状态更改请参见MapStateTrops功能,我通过单击下面导航栏的选项卡来检索此影片请参见附件 现在,当我点击我看到这部电影的按钮时,我尝试在同一类电影细节上做大致相同的事情,除了电影将出现在“观看”选项卡
import React from 'react'
import { StyleSheet, Share, Platform, View, Text, ActivityIndicator, ScrollView, Image,
TouchableOpacity, Button } from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import moment from 'moment'
import numeral from 'numeral'
import {connect} from 'react-redux'
import EnlargeShrink from'../Animations/EnlargeShrink'
import { NativeModules } from 'react-native'
if (__DEV__) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}
class FilmDetail extends React.Component {
static navigationOptions= ({ navigation }) => {
const { params } = navigation.state
// On accède à la fonction shareFilm et au film via les paramètres qu'on a ajouté à la navigation
if (params.film != undefined && Platform.OS === 'ios') {
return {
// On a besoin d'afficher une image, il faut donc passe par une Touchable une fois de plus
headerRight: <TouchableOpacity
style={styles.share_touchable_headerrightbutton}
onPress={() => params.shareFilm()}>
<Image
style={styles.share_image}
source={require('../Images/ic_share.png')} />
</TouchableOpacity>
}
}
}
constructor (props){
super (props)
this.state={
film: undefined,
isLoading: false
}
this._shareFilm = this._shareFilm.bind(this)
}
_updateNavigationParams() {
this.props.navigation.setParams({
shareFilm: this._shareFilm,
film: this.state.film
})
}
componentDidMount() {
const favoriteFilmIndex = this.props.favoritesFilm.findIndex(item => item.id === this.props.navigation.state.params.idFilm)
if (favoriteFilmIndex !== -1) { // Film déjà dans nos favoris, on a déjà son détail
// Pas besoin d'appeler l'API ici, on ajoute le détail stocké dans notre state global au state de notre component
this.setState({
film: this.props.favoritesFilm[favoriteFilmIndex]
}, () => { this._updateNavigationParams() })
return
}
// Le film n'est pas dans nos favoris, on n'a pas son détail
// On appelle l'API pour récupérer son détail
this.setState({ isLoading: true })
getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
this.setState({
film: data,
isLoading: false
}, () => { this._updateNavigationParams()})
})}
_shareFilm(){
const { film } = this.state
Share.share({ title: film.title, message: film.overview })
}
_displayFloatingActionButton(){
const { film } = this.state
if ( film != undefined && Platform.OS === 'android') {
return (
<TouchableOpacity
style={styles.share_touchable_floatingactionbutton}
onPress={() => this._shareFilm()}>
<Image
style={styles.share_image}
source={require('../Images/ic_share.png')} />
</TouchableOpacity>
)
}
}
_displayLoading(){
if (this.state.isLoading){
return(
<View style={styles.Loading_container}>
<ActivityIndicator size='large'/>
</View>
)
}
}
_toggleFavorite() {
const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
this.props.dispatch(action)
}
componentDidUpdate() {
console.log(this.props.favoritesFilm);
}
_displayFavoriteImage() {
var sourceImage = require('../Images/ic_favorite_border.png')
var shouldEnlarge= false //si le film n'est pas en favoris on veut qu'au en clic sur le button, celui-ci s'agrandise => shouldEnlarge a true!
if (this.props.favoritesFilm.findIndex (item => item.id === this.state.film.id) !== -1)
{
// Film dans nos favoris
sourceImage = require('../Images/ic_favorite.png')
shouldEnlarge= true
}
return (
<EnlargeShrink
shouldEnlarge= {shouldEnlarge}>
<Image
style={styles.favorite_image}
source={sourceImage}
/>
</EnlargeShrink>
)
}
_displayFilm(){
const {film}= this.state
if(film != undefined) {
return(
<ScrollView style={styles.scrollview_container}>
<Image
style={styles.image}
source={{uri: getImageFromApi(film.backdrop_path)}}
/>
<Text style={styles.title_text}>{film.title}</Text>
<TouchableOpacity
style={styles.favorite_container}
onPress={() => this._toggleFavorite()}>
{this._displayFavoriteImage()}
</TouchableOpacity>
<Text style={styles.description_text}>{film.overview}</Text>
<Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
<Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
<Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
<Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
<Text style={styles.default_text}>Genre(s) : {film.genres.map(function(genre){
return genre.name;
}).join(" / ")}
</Text>
<Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function(company){
return company.name;
}).join(" / ")}
</Text>
</ScrollView>
)
}
}
state={
toggle: false
}
_toggleVus(){
const newState = !this.state.toggle;
this.setState({toggle:newState})
}
render() {
const {toggle} = this.state;
const textValue= toggle?"Non vu":"Marquer comme vu";
console.log(this.props);
return (
<View style={styles.main_container}>
{this._displayFilm()}
{this._displayLoading()}
{this._displayFloatingActionButton()}
<View >
<TouchableOpacity style={styles.Buttom}
onPress={() =>this._toggleVus()}>
<Text style={styles.text}>{textValue}</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
},
Loading_container:{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
},
scrollview_container:{
flex: 1,
},
image: {
height: 169,
margin: 5
},
title_text: {
fontWeight: 'bold',
fontSize: 35,
flex: 1,
flexWrap: 'wrap',
marginLeft: 5,
marginRight: 5,
marginTop: 10,
marginBottom: 10,
color: '#000000',
textAlign: 'center'
},
description_text: {
fontStyle: 'italic',
color: '#666666',
margin: 5,
marginBottom: 15
},
default_text: {
marginLeft: 5,
marginRight: 5,
marginTop: 5,
},
favorite_container:{
alignItems: 'center'
},
favorite_image:{
flex: 1,
width: null,
height: null
},
share_touchable_floatingactionbutton:{
position: 'absolute',
width: 60,
height: 60,
right: 30,
bottom: 30,
borderRadius: 30,
backgroundColor: '#e91e63',
justifyContent: 'center',
alignItems: 'center'
},
share_image:{
width: 30,
height: 30
},
share_touchable_headerrightbutton: {
marginRight: 8
},
Buttom:{
backgroundColor:'dodgerblue',
justifyContent:'center'
},
text:{
textAlign:'center',
fontSize: 19,
color:'white'
}
})
const mapStateToProps= (state) =>{
return {
favoritesFilm: state.toggleFavorite.favoritesFilm
}
}
export default connect(mapStateToProps)(FilmDetail)
这就是我现在需要做的:
我不太明白你的意思,但是可以在MapStateTrops中添加多个状态到这样的道具中,你不需要创建另一个函数,只要你也从应用商店处理它
const mapStateToProps= (state) =>{
return {
favoritesFilm: state.toggleFavorite.favoritesFilm,
SeenFilm: state.any_store_state
}
}
我不太明白你的意思,但是可以在MapStateTrops中添加多个状态到这样的道具中,你不需要创建另一个函数,只要你也从应用商店处理它
const mapStateToProps= (state) =>{
return {
favoritesFilm: state.toggleFavorite.favoritesFilm,
SeenFilm: state.any_store_state
}
}