どのように反応ネイティブでonChangeTextコールバック関数を使用して別のページに値を渡すか？

Question

私はちょうど私は、ネイティブナビゲーターコンポーネントを反応する使用するときに問題がある、私はindex.ios.jsを持っているだけで、このindex.iosに表示するデフォルトのページと呼ばれるデフォルトのコンポーネントを持っているナビゲーターシーンをレンダリングしています.jsには、次のステップアクションのNavigator.NavigationBarコンポーネントもあります。デフォルトのコンポーネントには、ユーザーがsthと入力するためのTextInputコンポーネントがあります。

私の質問は、ユーザーがメインページの次のステップボタンをクリックしたときにTextInputコンポーネント（デフォルトページ内）がnullでないか空でないかどうかを確認したいのですが、 onTextChangeコールバック関数によって実行時に値が変更された場合、Navigatorコンポーネントはこの場合に動作しますか？しかし、私はまだそれを行う方法を知らない。

これは本当に私に多くのストレスを与えます。

here is the UI of the demo.

ありがとうございます。

Answer 1

メインページに状態を定義し、状態を所定の値で設定する関数を定義することができます。テキストフィールドを持つページにこの関数を渡すことができます。テキストフィールドのonChangeTextでこの関数を呼び出すと、メインページの状態を設定できます。メインコンポーネントの状態を確認して、空であるかどうかを確認することができます。

// i am assuming here that you pass the setMyText from the 'Main' component below as prop to this compoenet. 
 
class MyTextInputComponent extends Component { 
 
    render() { 
 
    return (
 
     <TextInput onChangeText={this.props.setMyText} /> 
 
    ) 
 
    } 
 
} 
 

 
class Main extends Compoenent { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     myText: '' 
 
    } 
 
    } 
 
    
 
    // you can pass this function to your component that has the text view like 'MyTextInputCompoenent' below 
 
    setMyText = (text) => { 
 
    this.setState({ 
 
     myText: text 
 
    }) 
 
    } 
 
    
 
    // here you can check if the this.state.myText is empty or not before continuing 
 
    onClickNext =() => { 
 
    if(this.state.myText) { 
 
     // do sth 
 
    } else { 
 
     // do sth else 
 
    } 
 
    } 
 
}