Reagieren Nativen Reagieren, Navigation, Header, Button-Event

Hallo, ich 'm versucht zu binden eine Funktion in meinem Navigator Rechts-Taste,

Aber Es gibt Fehler.

Dies ist mein code:

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Modal from 'react-native-modalbox';
import { StackNavigator } from 'react-navigation';
import {
   Text,
   View,
   Alert,
   StyleSheet,
   TextInput,
   Button,
   TouchableHighlight
} from 'react-native';

import NewsTab from './tabs/news-tab';
import CustomTabBar from './tabs/custom-tab-bar';

export default class MainPage extends Component {
    constructor(props) {
        super(props);  
    }

    alertMe(){
        Alert.alert("sss");
    }

    static navigationOptions = {
        title: 'Anasayfa',
        headerRight: 
            (<TouchableHighlight onPress={this.alertMe.bind(this)} >
                <Text>asd</Text>
             </TouchableHighlight>)        
    };

    render() {
        return(
            <View>

            </View>
        );
    }
}

Und Erhalten Sie eine Fehlermeldung wie diese:

undefined ist kein Objekt (Evaluierung dieser.alertMe.bind')

Wenn ich diese Methode in der render-Funktion, es funktioniert Super, aber in NavigatonOption I cant get behandelt es. was kann ich tun um dieses problem.

InformationsquelleAutor Andaç Temel | 2017-08-09
  1. 44

    Sollten Sie verwenden Sie die navigator-Funktion 

    static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        title: '[ Admin ]',
        headerTitleStyle :{color:'#fff'},
        headerStyle: {backgroundColor:'#3c3c3c'},
        headerRight: <Icon style={{ marginLeft:15,color:'#fff' }} name={'bars'} size={25} onPress={() => params.handleSave()} />
    };
};

    verwenden Sie die componentwillmount, so dass es vertreten können, wo Sie anrufen Funktion .

    componentDidMount() {
this.props.navigation.setParams({ handleSave: this._saveDetails });
}

    und dann Sie können schreiben Sie Ihre Logik in der Funktion 

    _saveDetails() {
**write you logic here for **
}

    **keine Notwendigkeit, bind-Funktion, wenn Sie mit dieser **

    • Sie sind ein Lebensretter. Es wird ganz geklappt.
    • Nur eine Frage. Kann ich diesen verwenden.Staat, in _saveDetails () - Funktion?
    • ja, Sie können es verwenden,. Sorry für die späte Antwort.
    • Um diese zu verwenden.setState, binden wie diese: this.props.navigation.setParams({ handleSave: this._saveDetails.bind(this) });
    • ich Tue das gleiche, aber mein button wird nicht angezeigt im header .. Warum ist das so ?
    InformationsquelleAutor ashutosh pandey
  2. 3

    Werden können, dasselbe wie oben ...

       class LoginScreen extends React.Component {
      static navigationOptions = {
        header: ({ state }) => ({
          right: <Button title={"Save"} onPress={state.params.showAlert} />
        })
      };

      showAlert() {
        Alert.alert('No Internet',
          'Check internet connection',
          [
            { text: 'OK', onPress: () => console.log('OK Pressed') },
          ],
          { cancelable: false }
        )
      }

      componentDidMount() {
        this.props.navigation.setParams({ showAlert: this.showAlert });
      }

      render() {
        return (
          <View />
        );
      }
    }
    InformationsquelleAutor Sanjeev Rao
Schreibe einen Kommentar