2017-06-28 2 views
2

Ich habe einen Vollbildmodus TextInput erstellt und möchte eine Aktion ausführen, wenn die Post button in der NavigationBar gedrückt wird. Da ich jedoch die Methode, die die Button in der onPress prop eine statische Methode aufrufen muss, habe ich keinen Zugriff auf die state.Native Navigation reagieren - Aktion mit dem Status der Komponente

Hier ist mein aktueller Code, und der Zustand kommt undefined in der console.log.

import React, { Component } from 'react'; 
import { Button, ScrollView, TextInput, View } from 'react-native'; 
import styles from './styles'; 

export default class AddComment extends Component { 
    static navigationOptions = ({ navigation }) => { 
    return { 
     title: 'Add Comment', 
     headerRight: (
     <Button 
      title='Post' 
      onPress={() => AddComment.postComment() } 
     /> 
    ), 
    }; 
    }; 

    constructor(props) { 
    super(props); 
    this.state = { 
     post: 'Default Text', 
    } 
    } 

    static postComment() { 
    console.log('Here is the state: ', this.state); 
    } 

    render() {  
    return (
     <View onLayout={(ev) => { 
     var fullHeight = ev.nativeEvent.layout.height - 80; 
     this.setState({ height: fullHeight, fullHeight: fullHeight }); 
     }}> 
     <ScrollView keyboardDismissMode='interactive'> 
      <TextInput 
      multiline={true} 
      style={styles.input} 
      onChangeText={(text) => { 
       this.state.post = text; 
      }} 
      defaultValue={this.state.post} 
      autoFocus={true} 
      /> 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

Irgendwelche Ideen, um zu erreichen, nach was ich suche?

Antwort

5

Ich sehe you've found die Lösung. Für zukünftige Leser:

Nonameolsson geschrieben, wie dies auf Github zu erreichen:

In componentDidMount setzen Sie die Methode als param.

componentDidMount() { 
    this.props.navigation.setParams({ postComment: this.postComment }) 
} 

Und es in Ihrem navigationOptions verwenden:

static navigationOptions = ({ navigation }) => { 
    const { params } = navigation.state 
    return { 
    title: 'Add Comment', 
    headerRight: (
     <Button 
     title='Post' 
     onPress={() => params.postComment()} 
     /> 
    ), 
    }; 
}; 
Verwandte Themen