React Native - 在标题中添加搜索栏

Question

我想在右侧的标题中添加一个搜索按钮。按下时，标题中会出现一个搜索栏。

我尝试使用 react-navigation 的 setParams() 函数，但出现错误。

我的代码：

    static navigationOptions = ({ navigation }) => {
        return {
            headerRight: (
                navigation.getParam('search') === 1 ?
                <TouchableOpacity onPress={navigation.getParam('searchBar')} style={{ marginHorizontal: 10 }}>
                    <FontAwesome name="search" size={28} color="white" />
                </TouchableOpacity>
                :
                <Text>My Search Bar</Text>
            )
        };
    };

    test() {
        this.props.navigation.setParams({searchBar: 0});
    }

    componentDidMount() {
        this.props.navigation.setParams({search: 1, searchBar: this.test})
    }

componentDidMount() 函数中的代码有效。但不是测试功能中的那个。

我收到以下错误消息：未定义不是对象（正在评估 'this.props.navigation')

我想要的结果是，当我按下“搜索”按钮时，出现文本“确定”

Answer 1

我认为这是更改值的简单错误。您必须更改搜索值才能更改您想要的值。

      static navigationOptions = ({ navigation }) => {
        return {
           headerTitle: <LogoTitle />,
            headerRight: (
                navigation.getParam('search') === 1 ?
                <TouchableOpacity onPress={() => navigation.setParams({search: 0})} style={{ marginHorizontal: 10 }}>
                     <FontAwesome name="search" size={28} color="white" />
                </TouchableOpacity>
                :
                <Text>My Search Bar</Text>
            )
        };
    };

    componentDidMount() {
        this.props.navigation.setParams({search: 1, searchBar: this.test})
    }