从导航反应本机调用功能

Question

我正在使用 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 is not an object (evaluatinh '_class.login.bind')"

我用的时候onPress={this.login}没反应

当我使用 onPress={this.login()} 时出现错误

TypeError: TypeError: _class.login 不是函数。

但是

我正在使用 onPress={() => alert('test')} 有效。

Answer 1

navigationOptions 必须是静态的，因为它是每个整个组件的一个实例，并且您正试图从静态字段中访问 'instance method' ((this.login)) ...，这成功了；没用...

据我了解，您正在尝试创建 'CustomHeader'，因此我建议：

您为自定义 header 创建一个单独的组件，并将此 'login' 方法作为道具传递。
禁用默认 header，通过填充 header: null 到 navigationOptions。
手动渲染此自定义 Header 组件。

禁用默认值header:

 const NavigatorConfig = {
  navigationOptions: {
    header: null,
  },
};

createStackNavigator(RouteConfigs, NavigatorConfig);

创建自定义 header:

const MyCustomHeader = ({ navigation, onlogin }) => { return(); };
- 在所有应该有它的屏幕中手动呈现这个自定义 header。

Answer 2

您可以使用 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(
          .....
        )
    }
}

从导航反应本机调用功能

React Native call function from navigation

javascript

react-native

react-native-navigation