Javascript 如何设置反应导航选项的功能?
在navigationOptions上设置了一个简单的textInput之后,我想有条件地呈现一个clear按钮Javascript 如何设置反应导航选项的功能?,javascript,react-native,Javascript,React Native,在navigationOptions上设置了一个简单的textInput之后,我想有条件地呈现一个clear按钮 static navigationOptions = ({ navigation }) => { const q = navigation.getParam("q", ""); const onSearch = navigation.getParam("onSearch"); const onFocus = navigation.getParam("on
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>
)
};
};
但是
现在的错误是函数作为子函数无效。今年五月
如果您返回一个组件,则会发生这种情况
因此,是否可以向导航选项添加函数?在
navigationOption
中,如果您无权访问此上下文,则无法在navigationOption
中调用您的方法
现在,要动态更改标题内容
您可以将一个导航参数从上一屏幕传递到当前屏幕,如onSearchStatus
在导航选项
中使用三元运算符动态显示内容
{navigation.state.params.onSearchStatus == "touched" && navigation.state.params.onSearchStatus != undefined ?
....//your touchableopacity code
: null}
现在,要使用setParams()
从导航中动态设置参数来更改内容
对于,Jaydeep,感谢您的帮助,但在放置{navigation.state.params.onSearchStatus==“toucted”?和setParams()之后,显示:TypeError:undefined不是组件生命周期组件didmount(){this.props.navigation.setParams]上的对象(评估'navigation.state.params.onSearchStatus')({onSearch:this.onSearch,onFocus:this.onFocus,clearText:this.\u clearText,onSearchStatus:this.onSearchStatus});}Jaydeep,谢谢您的帮助,但仍然存在错误。可能是因为搜索屏幕上的静态导航选项而不是路由器上的静态导航选项?Jaydeep ok,添加navigation.state.params&&before,停止了未定义的问题,但也没有返回按钮
const renderClearButton = navigation.getParam("renderClearButton");
and {renderClearButton}
{navigation.state.params.onSearchStatus == "touched" && navigation.state.params.onSearchStatus != undefined ?
....//your touchableopacity code
: null}