Question

我正在开发一个具有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中传递的参数，但似乎无法通过组件，关于我在做什么的任何想法？

Answer 1

我认为您在这里错过了回报

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

或者只是

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

反应导航更改componentDidMount上的自定义标题标题

1 个答案: