Question

在navigationOptions上设置一个简单的textInput之后，我想有条件地呈现一个清除按钮。

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不是一个函数（正在求值 '_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，

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

1 个答案: