[英]How to use ref in React Navigation header
I'm adding a search bar with button (ie search icon) in navigationOptions of React navigation.我在 React 导航的 navigationOptions 中添加了一个带有按钮(即搜索图标)的搜索栏。 Now I want to send the typed text with
navigate
function.现在我想用
navigate
功能发送输入的文本。 I don't know how to pass reference of TextInput to get its native text.我不知道如何通过 TextInput 的引用来获取其原生文本。 Following is the code I've done so far.
以下是我到目前为止所做的代码。
static navigationOptions = ({ navigation }) => (
headerStyle: {
...
},
headerTitle: (
<View style={{ width: '100%', height: 75, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 50, backgroundColor: 'white' }}>
<TextInput style={{ width: '85%', padding: 15 }}
onSubmitEditing={
(e) => (e.nativeEvent.text.length > 2) && navigation.navigate('Brands', {text: e.nativeEvent.text})
} />
<TouchableOpacity style={{ width: '15%', padding: 15 }}
onPress={() => navigation.navigate('Brands'/*, {text: HERE I WANT TO GET TEXT FROM REFERENCE}*/)}>
<Icon type='FontAwesome' name='search'
style={{ color: 'red', 20, textAlign: 'center' }} />
</TouchableOpacity>
</View>
)
)};
But as navigationOptions
is static, I can't use this
keyword inside it.但是由于
navigationOptions
是静态的,我不能在其中使用this
关键字。 Also I can't use state
inside navigationOptions as well.我也不能在 navigationOptions 中使用
state
。 So how could I use ref
to get input text on button press.那么我如何使用
ref
在按钮按下时获取输入文本。
EDIT编辑
I want to get TextInput
value from ref
我想从
ref
获取TextInput
值
<TextInput ref={(ref) => { this.input = ref; }} />
// OR
<TextInput ref='input' />
So that I can get its value from这样我就可以从中获得它的价值
this.input._lastNativeText
// OR
this.refs['input']._lastNativeText
But I cant use this
keyword or state
in navigationOptions
because its static.但是我不能在
navigationOptions
使用this
关键字或state
,因为它是静态的。 How can I access the value of TextInput on button click?如何在单击按钮时访问 TextInput 的值?
send callback to navigationOptions through naviagtion prop .通过 naviagtion prop 向 navigationOptions 发送回调。 set callback value in componentDidMount
在 componentDidMount 中设置回调值
componentDidMount=()=> {
this.props.navigation.setParams({
onSubmitEditing: this.onSubmitEditing,
});
}
onSubmitEditing=(event)=>{
console.log(event);
//this is avaialbel here
}
Get on SubmitEdit function from naviagttion params从 naviagttion 参数获取 SubmitEdit 功能
static navigationOptions = ({ navigation = this.props.navigation }) => {
const onSubmitEditing = navigation.state.params.onSubmitEditing;
return {
headerTitle: (
<View style={{ width: '100%', height: 75, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 50, backgroundColor: 'white' }}>
<TextInput style={{ width: '85%', padding: 15 }}
onSubmitEditing={onSubmitEditing} />
<TouchableOpacity style={{ width: '15%', padding: 15 }}
onPress={() => navigation.navigate('Brands'/*, {text: HERE I WANT TO GET TEXT FROM REFERENCE}*/)}>
<Icon type='FontAwesome' name='search'
style={{ color: 'red', size: 20, textAlign: 'center' }} />
</TouchableOpacity>
</View>
)
}
};
Just in case anybody needs this以防万一有人需要这个
componentDidMount(){
---
this.props.navigation.setParams({
setMenuRef: this.setMenuRef.bind(this),
});
---
}
_menu = null;
setMenuRef = ref => {
this._menu = ref;
};
onSortClick() {
this._menu.show();
}
static navigationOptions = ({navigation}){
headerRight:(
---
ref={navigation.state.params && navigation.state.params.setMenuRef}
---
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.