2


ReactNativeのpassProps/paramtersを使用してナビゲーションでビューをプッシュしようとしています。私はいくつかのグーグルと他のものでできること。

以下は、ナビゲータでビューをプッシュするコードです。

ReactNativeでパラメータ/コールバックを使用してビューをポップする方法

export default class LoginScreen extends Component { 
     constructor() { 
      super() 
      this.state = { 
      email: '', 
      password: '' 
      } 
     } 

     render() { 
      return (
      <View style={{flex:1, flexDirection:'column', justifyContent: 'center'}}> 
        <View style={{flexDirection:'column'}}> 
        <TextInput 
        style = {styles.input} 
        placeholder = 'Email' 
        autoCapitalize = 'none' 
        onChangeText = { (email) => {alert(this.state.email); this.setState({email})}} 
       /> 
         <TextInput 
         style = {styles.input} 
         placeholder = 'Password' 
         autoCapitalize = 'none' 
         onChangeText = {() => this.updatePassword()} 
        /> 
        </View> 
        <View style={{ marginTop:20, alignItems: 'center'}}> 
        <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center', borderWidth:1, width:100, height:40}} 
            onPress={() => this._onPressButton() } > 
        <Text >Login</Text> 
        </TouchableOpacity> 
        </View> 
       </View> 
     ); 
     } 

     _onPressButton() { 
     this.props.navigator.push({ 
      name: 'Home', 
      title: 'Home', 
      passProps: { 
      userName: this.state.email, 
      } 
callback: this._callbackFun(''), 
      }); 
     } 

     updateEmail = (text) => { 
      this.setState({email: text}) 
      alert(text) 
     } 
     updatePassword = (text) => { 
      this.setState({password: text}) 
      alert(this.state.password) 
     } 
    _callbackFun = (text) => { 
    alert(text) 
    } 

私は、任意の画面1は、活動に基づいてビューがScreen2にに起こっ更新できるように、ナビゲーション中passProps /パラメータを使用してビューをポップする方法を知りたいです。

以下は私のコードを表示します。

export default class HomeScreen extends Component { 
    constructor(props) { 
     super(props) 
    } 
    render() { 
    return (
     <View style={{flex:1, flexDirection:'column', alignItems: 'center', justifyContent: 'center'}}> 
      <Text>Login Successfully {this.props.userName}!!</Text> 
      <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center', marginTop:20, borderWidth:1, width:100, height:40}} 
       onPress={() => this._onPressButton1('button1') }> 
       <Text >Button1</Text> 
     </TouchableOpacity> 
     <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center', marginTop:20, borderWidth:1, width:100, height:40}} 
      onPress={() => this._onPressButton1('button2') }> 
      <Text >Button2</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
} 

_onPressButton1(buttonName) { 
    if(buttonName == 'button1') 
    { 
     this.props.navigator.pop(); 
    } 
    else if (buttonName == 'button2') { 
    this.props.callback(); 
    } 
} 


しかし、それは私にcallback function is undefinedのようなエラーを示しています。

パラメータを渡すか、コールバック関数を設定するのに役立ちます。

答えて

0

はまだ同じエラー

_onPressButton1(buttonName) { 
    if(buttonName == 'button1') 
    { 
     this.props.route.callback(args); 
     this.props.navigator.pop(); 
    } 
+0

を以下試してください。 'undefinedはオブジェクトではありません( 'this.props.route.callback'を評価します)。そして一つのこと。コールバックの楽しみは、プッシュビューで実行されています。なぜそんなことが起こっているのですか? – pratik03

+0

は 'Navigator'でpropsとして経路を渡しましたか? –

+0

これはあなたを助けるはずです。 http://stackoverflow.com/questions/29463592/react-native-pass-properties-on-navigator-pop –

関連する問題