react native navigationOptions中不能获取this、state
场景:在createStackNavigator路由过来的页面,navigationOptions的header中添加搜索框,如下图
static navigationOptions = {
headerStyle: {backgroundColor: '#0086f1'},
headerTitle: (
<TextInput placeholder={'请输入搜索内容'}
onChangeText={(text) => this.setState({'str': text})
};
constructor(props) {
super(props);
this.state = ({
str: ''
})
};
使用this.setState的时候出现如下错误
因为this对象为null,所以找不到setState方法
。
解决方法:外部引用
在最外部申明
let that;
在class内部赋值
constructor(props){
super(props);
that = this;
}
完整代码
let that;//外部申明
export default class MinePage extends Component<Props> {
static navigationOptions = {
......
};
constructor(props) {
super(props);
that=this;
this.state = ({
str: ''
})
};
render() {
return (
<View style={styles.container}>
//使用外部申明变量
<Text>{that.state.str}</Text>
</View>
);
}
}