如何使用 react-native-router-flux 设置作为选项卡子级的场景的标题

Question

我有这条路线：

    export default props => (
        <Router>
            <Stack key="root" hideNavBar>
                <Tabs key='tabs'
                      tabs={true}
                      initial
                      tabBarStyle={{backgroundColor: THEME_NAVBAR_AND_TABBAR}}
                      showLabel={false}>
                    <Scene key='events' component={Events} title='Events' icon={TabIcon}/>

                </Tabs>
            </Stack>
        </Router>
    )

在我的事件组件上，我有这个：

 import React from 'react'
 import {View, Text, ScrollView, TouchableWithoutFeedback, 
 TouchableOpacity} from 'react-native'
 import {connect} from "react-redux"

 import style from './style'
 import {Actions} from "react-native-router-flux";

class Events extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        loaded: false
    }
}
componentDidMount() {
    Actions.refresh({ title: 'xxxx' })
}
render() {
    return (
        <ScrollView style={style.scene}>

        </ScrollView>
    )
}
}

const mapStateToProps = state => (
{
    events: state.ContentReducer.events
}
)

export default connect(mapStateToProps,
{

})(Events)

但它被忽略了。可能是因为场景是 Tabs 的子节点。如何做出这种改变？ （它必须是我在组件内 - 不能在路由器上）

Answer 1

经过多次研究和反复试验，我找到了解决方案：

this.props.navigation.setParams({
            title: 'xxxx'
        })

Answer 2

这是因为选项卡默认加载所有嵌套的场景，您可以通过“懒惰”的道具来防止这种情况。但是如果你打开场景一次，你将需要使用 componentWillReceiveProps 来获取新的道具，因为即使你改变标签，场景也会保持打开状态。

在Events组件场景中，你可以使用标题作为状态，然后使用componentWillMount函数获取标题，使用componentWillReceiveProps函数在标题发生变化时获取新标题。

componentWillMount() {
  this.setState({title: this.props.title});
}

componentWillReceiveProps(newProps) {
  //new title
  this.setState({title: newProps.title});
}