[英]react-navigation: How to wrap navigationOptions in multiple screens
[英]How set function on react-navigation 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 "";
}
}
但这发生
类型错误:未定义不是函数(评估 '_this2.renderClearButton()')
我试过:
const renderClearButton = navigation.getParam("renderClearButton");
and {renderClearButton}
但
现在的错误是函数作为反应孩子无效。 如果您改为返回组件,则可能会发生这种情况
那么可以向navigationOptions添加一个函数吗?
在navigationOption
您无权访问this
上下文,您无法在navigationOption
调用您的方法。
所以现在,要动态更改标题内容,
您可以将一个导航参数从上一个屏幕(如onSearchStatus
传递到当前屏幕。
使用三元运算符在navigationOption
本身中像这样动态显示您的内容,
{navigation.state.params.onSearchStatus == "touched" && navigation.state.params.onSearchStatus != undefined ?
....//your touchableopacity code
: null}
现在使用setParams()
从导航中动态设置参数更改内容,
欲了解更多详情,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.