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

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)

但它被忽略了。可能是因为场景是一个child的Tabs。如何进行此更改？（它必须在组件内部 - 不能在路由器上）

Answer 1

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

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

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

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

Answer 2

经过多次研究和trial/errors，我找到了一个解决方案：

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

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

How to set the title of the scene that's a child of a tab using react-native-router-flux

react-native

react-native-router-flux