React導航：當值來自於redux並在child中更新時，如何更新父級的導航標題？

我正在使用react-navigation並有一個StackNavigator和ParentScreen和ChildScreen。React導航：當值來自於redux並在child中更新時，如何更新父級的導航標題？

兩個屏幕都具有相同的導航欄，其中包含來自redux的動態值。像Issue #313

中描述的那樣實施。當我進入DetailScreen並更新count變量的值時，它也會更新導航欄中的值。

問題是，如果我回到父級場景，導航欄中仍然存在舊值。它不會更新到redux商店中的當前值。

兒童

screen shot 2017-04-11 at 15 20 28

家長（當我回去）

screen shot 2017-04-11 at 15 21 31

ChildScreen

class ChildScreen extends Component { 
    static navigationOptions = { 
    title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.count != this.props.count) { 
     this.props.navigation.setParams({ count: nextProps.count }); 
    } 
    } 

    render() { 
    return (
     <View> 
     <Button onPress={() => this.props.increment()} title="Increment" /> 
     </View> 
    ); 
    } 
}

ParentScreen

class ParentScreen extends Component { 
    static navigationOptions = { 
    title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 
}

有什麼建議？

來源

2017-04-11 crispychicken

難道不更新的價值，或者是它的渲染方法不叫？ – soywod

需要更多信息來調試：您的組件是否連接了？「增量」的實現是什麼？你如何將你的應用程序集成到Redux？考慮更新問題以包含更多信息。 –

我的建議是：

確保ParentScreen連接通過反應，終極版connect功能。
如果您希望ParentScreen的標題在商店狀態發生變化時自動更新，則連接它將不夠。您將不得不像ChildScreen組件中那樣使用componentWillReceiveProps。

獎金：你可以創建一個高階組件封裝這種行爲，就像這樣：

const withTotalTitle = Component => props => { 
    class TotalTitle extends Component { 
    static navigationOptions = { 
     title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.count != this.props.count) { 
     this.props.navigation.setParams({ count: nextProps.count }); 
     } 
    } 

    render() { 
     return (
     <Component {...props}/> 
    ); 
    } 
    } 

    return connect(state => { count: state.total })(TotalTitle); // update this (I have no idea what the structure your state looks like) 
};

然後你可以使用這樣的：

const ChildScreen = withTotalTitle(({ increment }) => (
    <View> 
    <Button onPress={() => increment()} title="Increment" /> 
    </View> 
)); 

const ParentScreen = withTotalTitle(() => (
    <View> 
    <Text>Whatever ParentScreen is supposed to render.</Text> 
    </View> 
));

來源

2017-04-18 01:48:48 Josep

OP ，這可能是您的redux實現的一個問題。您是否熟悉REDX如何實現其商店？這裏我沒有提到，這意味着你的遞增函數可能只是更新子組件的狀態，而不是分派動作和縮減器。請看看像這樣一個適當的redux執行：https://onsen.io/blog/react-state-management-redux-store/

來源

2017-04-20 00:00:37 swyx

有一個共同的縮小父母和孩子。這樣，當狀態發生變化時，所有組件（您的案例中的父母和孩子）都會得到通知。

爲父母和孩子編寫連接函數。您將在componentWillReceiveProps方法中收到更新的狀態。隨心所欲地使用它。

希望它會有所幫助。

來源

2017-04-20 11:19:27 atitpatel

您需要使用道具才能將增加的值從子項傳遞給父組件。

找到下面的文章。它有父母和孩子組成部分之間溝通的很好例子。

http://andrewhfarmer.com/component-communication/

感謝

來源