react-navigation navigationOptions 如何设置功能？

Question

在导航选项上设置一个简单的文本输入后，我想有条件地呈现一个清除按钮。

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>
      )
    };
  };

所以这里是函数

 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 "";
    }
  }

但是会发生这种情况

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

我已经尝试过：

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

但是

现在的错误是函数作为反应子无效。这可能 如果你返回一个组件，就会发生这种情况

那么可以给navigationOptions添加一个函数吗？

Answer 1

在navigationOption 中，你无权访问this 上下文，你不能在navigationOption 中调用你的方法。

所以现在，要动态更改标题内容，

您可以将一个导航参数从上一屏幕传递到当前屏幕，例如 onSearchStatus。

使用三元运算符在navigationOption 本身中动态显示您的内容，

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

现在使用setParams()从导航更改内容动态设置参数，

对于more detail，