如何在 react-navigation navigationOptions 上设置功能？

Question

after setup a simple textInput on navigationOptions, i'd like to render a clear button conditionally.

static navigationOptions = ({ navigation }) => {
    const q = navigation.getParam("q", "");
    const onSearch = navigation.getParam("onSearch");
    const onFocus = navigation.getParam("onFocus");

    return {
      headerStyle: {
        backgroundColor: "#fff"
      },
      header: (
        <View style={styles.searchContainer}>
          <HeaderBackButton
            tintColor="black"
            onPress={() => navigation.navigate("Home")}
          />
          <TextInput
            underlineColorAndroid="transparent"
            style={styles.inputContainer}
            placeholder="Search"
            value={q}
            onChangeText={text => onSearch(text)}
            onFocus={onFocus}
            //clearButtonMode="always"
          />
          {this.renderClearButton()}
        </View>
      )
    };
  };

So here is the function

 renderClearButton() {
    if (this.state.onSearchStatus == "touched") {
      return (
        <TouchableOpacity onPress={navigation.getParam("clearText")}>
          <Image
            style={styles.button}
            source={require("../assets/icons/clear.png")}
          />
        </TouchableOpacity>
      );
    } else {
      return "";
    }
  }

But this happen

TypeError: undefined is not a function (evaluating '_this2.renderClearButton()')

i've tried to:

const renderClearButton = navigation.getParam("renderClearButton");
and {renderClearButton}

but

the error now is Functions are not valid as a react child. this may happen if you return a component instead

So is possible to add a function to navigationOptions ?

Answer 1

In navigationOption you do not have access to this context, you can not call your method in navigationOption .

So now, to dynamically change the header contents,

You can pass one navigation param to your current screen from previous screen like onSearchStatus .

use a ternary operator to show your content dynamically like this in navigationOption itself,

{navigation.state.params.onSearchStatus == "touched" && navigation.state.params.onSearchStatus != undefined  ?
    ....//your touchableopacity code
: null}

now to change the content dynamically set params from navigation using setParams() ,

for more detail ,