Passprops equivalentes ao Navigator?
Estou tentando converter do NavigatorIOS para o Navigator e não consigo descobrir como fazer com que os passprops funcionem. Estou tentando passar duas variáveis, LRA e email para a próxima cena, mas continuo indefinido. Eu sou muito novo nisso, então desculpe se esta é uma pergunta fácil. Aqui está o meu código até agora, fique à vontade para me dar outras dicas que você vê de errado com ele!
DataEntry.js
class DataEntry extends Component {
constructor(props) {
super(props);
this.state = {
emailString: '[email protected]',
isLoading: false,
message: '',
mailerror: false,
lraerror: false
};
}
onEmailTextChanged(event) {
this.setState({ emailString: event.nativeEvent.text });
if (!validateEmail(this.state.emailString)){
this.emailError = "Please enter a valid email"
this.setState({error: true})
}
else{
this.emailError = ""
this.setState({error: false})
}
}
onLRATextChanged(event) {
this.setState({ LRAString: event.nativeEvent.text });
if (!isValidID(this.state.LRAString)){
this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
this.setState({error: true})
}
else{
this.LRAError = ""
this.setState({error: false})
}
}
gotoNext() {
var emailtext = this.state.emailString
var LRAtext = this.state.LRAString
console.log(emailtext)
this.props.navigator.push({
id: 'PasswordView',
name: 'Generated Password',
email: emailtext,
LRA: LRAtext
});
}
renderScene(route, navigator) {
var email = this.state.emailString
var LRA = this.state.LRAString
return (
<View style={styles.container}>
<Text style={styles.description}>
Please enter the email and LRA
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
value={this.state.emailString}
onChange={this.onEmailTextChanged.bind(this)}
placeholder='Enter Email'/>
</View>
<Text style={styles.error}>
{this.emailError}
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
value={this.state.LRAString}
onChange={this.onLRATextChanged.bind(this)}
placeholder='Enter LRA ID'/>
</View>
<Text style={styles.error}>
{this.LRAError}
</Text>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'
onPress={this.gotoNext.bind(this)}>
<Text style={styles.buttonText}>Retrieve Password</Text>
</TouchableHighlight>
<Text style={styles.description}>{this.state.message}</Text>
</View>
);
}
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
return null;
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: 'white', margin: 10, fontSize: 16}}>
Data Entry
</Text>
</TouchableOpacity>
);
}
};
module.exports = DataEntry;