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)

但是它被忽略了。可能是因为该场景是“标签”的子级。如何进行更改？（它必须在组件内部，不能在路由器上）

Answer 1

之所以会发生这种情况，是因为选项卡默认情况下会加载所有嵌套的场景，因此您可以传递道具“惰性”来防止这种情况。但是，如果您一次打开场景，则将需要使用componentWillReceiveProps来获取新的道具，因为即使更改选项卡，场景也将保持打开状态。

在“事件”组件场景中，可以使用标题作为状态，然后使用componentWillMount函数获取标题，并使用componentWillReceiveProps函数获取新标题（更改时）。

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

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

Answer 2

经过多次研究和试验/错误，我找到了解决方案：

`0 1 1 0 0 0 0`
`1 0 0 1 1 1 0`
`1 0 0 0 0 0 1`
`0 1 0 0 0 0 1`
`0 1 0 0 0 0 1`
`0 1 0 0 0 0 0`
`0 0 1 1 1 0 0`

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

2 个答案: