Реагировать Навигация изменить заголовок пользовательского заголовка на componentDidMount - PullRequest
Новая
       29

Реагировать Навигация изменить заголовок пользовательского заголовка на componentDidMount

0 голосов
/ 11 октября 2018

Я занимаюсь разработкой приложения, в котором есть tabNavigator, и для каждой вкладки оно имеет stackNavigator с пользовательским заголовком.С одного экрана мне нужно иметь возможность передать параметр в stackNavigator для изменения заголовка заголовка.

MyScreen.js: 

class MyScreen extends Component {
    state = {
        title: "My Title"
    }

    static navigationOptions = ({ navigation }) => {
        const appToolbarTitle = navigation.state.params && navigation.state.params.title
                ? navigation.state.params.title
                : "";
        console.log("NAV_PARAM: " + appToolbarTitle);
        return {
            header: props => {
                <AppToolbar title={appToolbarTitle} />;
            }
        };
    };

    setScreenTitle = title => {
        const { setParams } = this.props.navigation;
        setParams({ title: title });
    };

    componentDidMount() {
        if (this.state.title != null && this.state.title != undefined) {
            this.setScreenTitle(this.state.title);
        }
    }

    ....

}

AppToolbar.js: 

const appToolbar = props => {
    return (
        <View style={styles.toolbar}>
            <Text style={styles.toolbarTitle}>{props.title}</Text>
            <TouchableOpacity onPress={...}>
                <Icon
                    name="ios-contact"
                    color="grey"
                    size={30}
                    style={{ padding: 0, margin: 0, marginRight: 10 }}
                />
            </TouchableOpacity>
        </View>
    );
};

По какой-то причине оператор console.log правильно печатает параметр, переданный в componentDidMount, но кажется, что он не доходит до компонента, есть идеи относительно того, что я делаю неправильно?

1 Ответ

0 голосов
/ 11 октября 2018

Я думаю, что вам не хватает возврата сюда 

header: props => {
               return  (<AppToolbar title={appToolbarTitle} />);
            }

или просто

header: props => <AppToolbar title={appToolbarTitle} />

...