预期行为
VendorGallery正确获取新道具，这是从componentWillMount（）方法正确控制台记录的。
当我在VendorsFullScreenGallery中编辑书签时，会正确触发此生命周期事件。一般来说，Redux似乎被正确连接，实际上通过切换VendorGallery的子标签我可以看到新的道具。
似乎反应导航正在迫使'上一个'组件显示它最初拥有的道具。
有什么想法吗？
图库代码：
function mapStateToProps (state) {
return {
bookmarks: state.Bookmarks,
products: state.Products
}
}
class Gallery extends Component {
constructor (props) {
super(props);
/* Comes from Router */
this.data = {
initialTag: this.props.navigation.state.params.initialTag,
hasFilters: this.props.navigation.state.params.hasFilters
}
if (this.data.hasFilters) {
activeGalleryTags = new Set();
if (this.data.initialTag)
activeGalleryTags.add(this.data.initialTag)
this.state = {
currentTab: this.data.initialTag ? 1 : 0,
activeGalleryTags: activeGalleryTags
}
console.debug(this.props.navigation);
}
else
this.state = {
currentTab: 0
}
}
componentDidMount () {
console.log("Did mount");
}
componentWillUpdate () {
console.log("Will update");
}
componentWillReceiveProps (nextProps) {
console.log("Will receive props");
console.debug(nextProps);
}
_checkBookmark (product) {
if (this.props.bookmarks !== {}) {
console.debug("Checking bookmark");
for (id in this.props.bookmarks)
if (this.props.bookmarks[id].res_id == product.id) {
console.debug("Ok", product.id);
return id;
}
return null;
}
}
/* Callback for <TagList>, _newState is TagList's internal collection of selected tags */
_onTagClicked (_newState) {
this.setState({
activeGalleryTags: _newState
})
}
_onZoomClicked (id) {
params_ = {
selectedID: id
}
this.props.navigation.dispatch(NavigationActions.navigate({
routeName: 'VendorFullGallery',
params: params_
})
)
}
_renderFeaturedGallery () {
gallery = new Array();
thumbWrapper = {
width: Dimensions.get('window').width/1.3 - 12,
height: Dimensions.get('window').height/1.6 - 12,
margin: 5
};
this.props.products.productsList
.filter(
(p) => {
return p.featured
}
)
.map((p) => {
gallery.push(
<PictureThumb
onZoomClicked={this._onZoomClicked.bind(this, p.id)}
key={p.id}
product={p}
wrapperStyle={thumbWrapper}
bookmarkID={this._checkBookmark(p)}
/>
);
});
return gallery;
}
_renderGallery () {
gallery = new Array();
thumbWrapper = {
width: Dimensions.get('window').width/2 - 15,
height: Dimensions.get('window').height/3 - 12,
margin: 5
};
if (this.data.hasFilters && this.state.activeGalleryTags.size > 0)
filteredProducts = this.props.products.productsList.filter((p) => this.state.activeGalleryTags.has(p.category))
else
filteredProducts = this.props.products.productsList;
filteredProducts.map(
(p) => {
gallery.push(
<PictureThumb
key={p.id}
bookmarkID={this._checkBookmark(p)}
onZoomClicked={this._onZoomClicked.bind(this, p.id)}
product={p}
wrapperStyle={thumbWrapper}
/>
);
}
);
return gallery;
}
_showAllProducts () {
return (
<View>
<TagList tags={this.props.products.tags} initialTag={this.data.initialTag} behaveAsFilter={true} onTagClicked={this._onTagClicked.bind(this)} />
<ScrollView>
<View style={{flex: 1, flexWrap: 'wrap', flexDirection: 'row'}}>
{this._renderGallery()}
</View>
</ScrollView>
</View>
)
}
_showFeatured () {
return (
<Coverflow perspective={900} wingSpan={10} style={{marginTop: 20}} onChange={(index) => {}}>
{this._renderFeaturedGallery()}
</Coverflow>
)
}
render () {
console.log("Rerender gallery");
let show = null;
switch (this.state.currentTab) {
case 0:
show = this._showFeatured()
break;
case 1:
show = this._showAllProducts();
break;
}
return(
<View style={globalStyles.wrapper}>
<View style={{width: 300, margin: 10, alignSelf: 'center'}}>
<SegmentedControlTab
values={['FEATURED', 'ALL PRODUCTS']}
selectedIndex={this.state.currentTab}
onTabPress={index => this.setState({currentTab:index})}
tabStyle={{
borderColor: globalStyles.NAVIMODA_BLUE
}}
tabTextStyle={{
fontSize: 10,
letterSpacing: 1
}}
activeTabStyle={{
backgroundColor: globalStyles.NAVIMODA_BLUE
}}
activeTabTextStyle={{
color: 'white'
}}
/>
</View>
<View>
{show}
</View>
</View>
)
}
}
export default connect(mapStateToProps)(Gallery);
FullScreenGallery的代码：
function mapStateToProps (state) {
return {
bookmarks: state.Bookmarks,
products: state.Products
}
}
class FullScreenGallery extends Component {
static navigationOptions = {
tabBarVisible: false
};
constructor (props) {
super (props);
this.data = {
selectedIndex: this.props.navigation.state.params.selectedID
}
this.data.selectedIndex = this.props.products.productsList.findIndex((p) => {
return p.id == this.props.navigation.state.params.selectedID
});
this.state = {
visibleSwiper: false
}
}
_checkBookmark (product) {
if (this.props.bookmarks !== {}) {
console.debug("Checking bookmark");
for (id in this.props.bookmarks)
if (this.props.bookmarks[id].res_id == product.id) {
console.debug("Ok", product.id);
return id;
}
return null;
}
}
componentDidMount () {
setTimeout(() => {
this.setState({visibleSwiper: true})
}, 100);
this.props.navigation.dispatch(
NavigationActions.setParams({
params: { hideTabBar: true },
key: 'Index',
})
);
}
onShowVendorClicked () {
if (this.props.products.vendor !== null)
this.props.navigation.dispatch(NavigationActions.navigate({
routeName: 'VendorDetail'
}))
}
_renderPics () {
let _pics = new Array();
this.props.products.productsList.map((p) => {
if (this.data.vendor) {
_pics.push(
<PictureDetail
key={p.id}
product={p}
onShowVendorClicked={this.onShowVendorClicked.bind(this)}
vendor={this.props.product.vendor}
bookmarkID={this._checkBookmark(p)}
/>
)
}
else
_pics.push(
<PictureDetail
key={p.id}
product={p}
onShowVendorClicked={this.onShowVendorClicked.bind(this)}
vendor={p.vendor}
bookmarkID={this._checkBookmark(p)}
/>
)
});
return _pics;
}
render () {
if (this.state.visibleSwiper)
return (
<Swiper index={this.data.selectedIndex}>
{this._renderPics()}
</Swiper>
)
else
return (
<View style={globalStyles.spinnerWrapper}>
<Spinner color='black' />
</View>
)
}
}
export default connect(mapStateToProps)(FullScreenGallery)