React Navigation - 无法更新标题

Question

我的 react 本机应用程序中有以下代码，但在登录后导航到仪表板屏幕时无法更新屏幕标题。这很简单，但因为我不明白这里有什么问题，所以我发布了这个。

登录调用后，我导航到仪表板。

this.props.navigation.navigate('Dashboard', {
     title: 'Dashboard'
})

我的 DashboardScreen.js 如下。

这与 react 导航库的文档中的完全一样。

class DashboardScreen extends React.Component {
    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;

        let title = navigation.state.params.title ? navigation.state.params.title : 'This is Sparta!';

        return {
            title: title
        };
    };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <ScrollView>
                <Card>
                    <Text>Dashboard Screen</Text>
                </Card>
            </ScrollView>
        )
    }
}

我的基础 StackNavigator。

const StackNavigator = createStackNavigator({
    Login: {
        screen: LoginScreen
    },
    Dashboard: {
        screen: DashboardScreen
    }
}, {
    initialRouteName: "Login",
});

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <StackNavigator/>
        )
    }
}

export default App;

我是 react native 的新手，所以 react 导航对我来说也是新的。尝试了各种方法，包括使用 navigationOptions 传递额外的道具。

有人能指出确切的问题吗？提前致谢。

Answer 1

class DashboardScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: this.props.navigation.state.params.title
        };
    }

    render() {
        return (
            <ScrollView>
                <Card>
                    <Text>{this.state.title}</Text>
                </Card>
            </ScrollView>
        )
    }
}

希望对你有帮助。