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（）函数中的代码起作用。但不是测试功能中的那个。

我收到以下错误消息：undefined不是对象（正在评估 '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})
    }

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

1 个答案: