开发者问题收集

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

2019-02-11
55

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

我尝试了以下操作,但没有成功:

-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”。

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.biometryStatusundefinedgetParam 的第二个参数是默认值。您应该像这样更改它

const biometryStatus = navigation.getParam('biometryStatus', false);
Poptocrack
2019-02-11