无法成功将参数传递给另一个 .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.biometryStatus
为
undefined
。
getParam
的第二个参数是默认值。您应该像这样更改它
const biometryStatus = navigation.getParam('biometryStatus', false);
Poptocrack
2019-02-11