无法将参数成功传递到另一个.js文件/屏幕

Question

我正在尝试使用反应导航将参数从一个屏幕传递到另一个屏幕，我遇到的问题是当我控制台.log参数本身时，控制台返回"未定义"。我似乎无法准确地指出我做错了什么。任何帮助或指导将不胜感激。

我尝试了以下方法，但没有成功：

-this.props.navigation.getParam('biometryStatus'(-this.props.navigation.state.params('biometryStatus'(

这是我的身份验证注册屏幕，其中我的参数被初始化为组件的状态：

  export default class AuthenticationEnroll extends Component {
    constructor() {
        super()
        this.state = {
          biometryType: null
        };
    }
    async _clickHandler() {
        if (TouchID.isSupported()){
            console.log('TouchID is supported');
            return TouchID.authenticate()
            .then(success => {
                AlertIOS.alert('Authenticated Successfuly');
                this.setState({biometryType: true })
                this.props.navigation.navigate('OnboardingLast', {
                  pin: this.props.pin,
                  biometryStatus: this.state.biometryType,
                });
            })
            .catch(error => {
                console.log(error)
                AlertIOS.alert(error.message);
            });
        } else {
            this.setState({biometryType: false });
            console.log('TouchID is not supported');
            // AlertIOS.alert('TouchID is not supported in this device');
        }
    }
    _navigateOnboardingLast() {
      this.props.navigation.navigate('OnboardingLast', {pin: this.props.pin})
    }
    render () {
      return (
        <View style={{flex: 1}}>
          <Slide
            icon='fingerprint'
            headline='Secure authentication'
            subhead='To make sure you are the one using this app we use authentication using your fingerprints.'
            buttonIcon='arrow-right'
            buttonText='ENROLL'
            buttonAction={() => this._clickHandler()}
            linkText={'Skip for now.'}
            linkAction={() => this._navigateOnboardingLast()}
            slideMaxCount={4}
            slideCount={2}
            subWidth={{width: 220}}
          />
        </View>
      )
    }
} 

这是我的入职最后一个屏幕，我的参数正在通过控制台传递和打印.log：

class OnboardingLast extends Component {
  async _createTokenAndGo () {
    let apiClient = await this._createToken(this.props.pin)
    this.props.setClient(apiClient)
    AsyncStorage.setItem('openInApp', 'true')
    const { navigation } = this.props; 
    const biometryStatus = navigation.getParam('biometryStatus', this.props.biometryStatus);
    console.log(biometryStatus); 
    resetRouteTo(this.props.navigation, 'Home')
  }
  /**
  * Gets a new token from the server and saves it locally
  */
  async _createToken (pin) {
    const tempApi = new ApiClient()
    let token = await tempApi.createToken(pin)
    console.log('saving token: ' + token)
    AsyncStorage.setItem('apiToken', token)
    return new ApiClient(token, this.props.navigation)
  }
  render () {
    return (
      <View style={{flex: 1}}>
        <Slide
          icon='checkbox-marked-circle-outline'
          headline={'You're all set up!'}
          subhead='Feel free to start using MyUros.'
          buttonIcon='arrow-right'
          buttonText='BEGIN'
          buttonAction={() => this._createTokenAndGo()}
          slideMaxCount={4}
          slideCount={3}
        />
      </View>
    )
  }
} 

预期结果是控制台.log(biometryStatus(;返回"true"或"false"，但它返回"undefined"。

Answer 1

由于 setState 是异步的，因此您将null(在构造函数中声明(发送到下一页。通过这样做，您将发送 true：

this.setState({ biometryType: true })
this.props.navigation.navigate('OnboardingLast', {
    pin: this.props.pin,
    biometryStatus: true,
});

你也可以这样做，因为 setState 可以将回调作为参数：

this.setState({ biometryType: true }, () => {
  this.props.navigation.navigate('OnboardingLast', {
    pin: this.props.pin,
    biometryStatus: true,
  });
})

在您的第二页中，this.props.biometryStatus是undefined .getParam 的第二个参数是默认值。你应该这样改变它

const biometryStatus = navigation.getParam('biometryStatus', false);