Question

我正在尝试使用react-navigation将参数从一个屏幕传递到另一个屏幕，我遇到的问题是当我用console.log记录参数本身时，控制台会返回“ undefined”。我似乎无法确切指出我在做什么错。任何帮助或指导将不胜感激。

我尝试了以下操作，但没有成功：

-this.props.navigation.getParam（'biometryStatus'） -this.props.navigation.state.params（'biometryStatus'）

这是我的AuthenticationEnroll屏幕，其中我的参数被初始化为组件的状态：

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

这是我的OnboardingLast屏幕，我的参数正在向下传递并通过console.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>
    )
  }
}

预期结果是console.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 can take a callback as param：

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

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

1 个答案: