javascript - 如何在 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 (evaluating '_this2.renderClearButton()')

我试过:

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

但是

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

那么可以向navigationOptions添加一个功能吗？

Answer 1

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

现在，要动态更改 header 内容，

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

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

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

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

more detail ,