如何在 React Native 中使用参数/回调弹出视图

Question

我正在尝试使用 ReactNative 中的 passProps/paramters 在导航中推送视图。我可以通过一些谷歌搜索和其他东西。

下面是我在导航器中推送视图的代码。

    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)
   }

我想知道如何在 Navigation 中使用 passProps/parameters 弹出视图，以便任何 screen1 都可以根据 screen2 上发生的活动更新视图。

下面是我弹出视图的代码。

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 之类的错误。

任何传递参数或设置回调函数的帮助将不胜感激。！！！

Answer 1

尝试关注

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