我正在使用React原生导航。 (堆栈导航)。但我不能在navigationOptions中调用函数。不工作。
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, AsyncStorage, Alert } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import HandleBack from '../../HandleBack';
export default class Dashboard extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => {
return {
title: 'Dasboard',
headerLeft: null,
headerRight: (
<TouchableHighlight underlayColor='transparent' onPress={this.login.bind(this)} style={{marginRight: 10}}>
<Icon
name="power-off"
size={25}
color="white"
/>
</TouchableHighlight>
)
};
};
login() {
alert('Button clicked!');
}
onBack = () => {
this.props.navigation.navigate('Screen3');
};
render() {
return(
<HandleBack onBack={ this.onBack }>
<View>
<Text> This is screen 2 </Text>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
<Text> Go to Screen 3 </Text>
</TouchableHighlight>
</View>
</HandleBack>
)
}
}
当我使用onPress={this.login.bind(this)}
得到错误
“TypeError:TypeError:undefined不是对象(评估'_class.login.bind')”
当我使用onPress={this.login}
没有反应。
当我使用onPress={this.login()}
得到错误
TypeError:TypeError:_class.login不是函数。
但
我正在使用onPress={() => alert('test')}
正在工作。
您可以使用setParams或getParams实现反应导航。
export default class Dashboard extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Dasboard',
headerLeft: null,
headerRight: (
<TouchableHighlight underlayColor='transparent'
onPress={navigation.getParam('login')} //call that function in onPress using getParam which we already set in componentDidMount
style={{marginRight: 10}}>
<Icon
name="power-off"
size={25}
color="white"
/>
</TouchableHighlight>
)
};
};
login() {
alert('login click')
}
onBack = () => {
this.props.navigation.navigate('Screen3');
};
componentDidMount() {
this.props.navigation.setParams({ login: this.login }); //initialize your function
}
render() {
return(
.....
)
}
}
navigationOptions必须是静态的,因为它是每个组件的一个实例,并且你试图从静态字段中访问'实例方法'((this.login))...这就赢了;工作......
根据我的理解,你正在尝试创建'CustomHeader',所以我建议:
const NavigatorConfig = {
navigationOptions: {
header: null,
},
};
createStackNavigator(RouteConfigs,NavigatorConfig);