リアクションネイティブナビゲーション - コンポーネントの状態を使用した操作

Question

TextInputのフルスクリーンを作成しました。NavigationBarのPost buttonが押されたときに処理を実行したいと考えています。しかし、私がButtonが呼び出す方法をonPressが静的​​メソッドをプロポーズする必要があるため、私はstateへのアクセス権がありません。

ここに私の現在のコードがあり、状態は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> 
    ); 
    } 
} 

アイデアをお探しですか？

Answer 1

私はyou've foundを参照してください。将来の読者のために：

NonameolssonはGithubの上でこれを実現する方法を掲示：componentDidMountで

はPARAMような方法を設定します。

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

そして、あなたのnavigationOptionsでそれを使用します。

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