javascript - React Navigation - 无法更新标题

Question

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

登录呼叫后，我导航到仪表板。

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;

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

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

标签： javascriptreactjsreact-nativereact-navigation

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>
        )
    }
}

我希望这能帮到您。