通过Navigator React Native传递参数

Question

I am new to the React Native framework and I have the following issue...

I have a page that contains a Navigator and 2 text inputs for 'username' and 'password'.

I want to use this for a login, and at this step, just pass the parameters into the next page, and output to the screen "Hello {username}".

The code:

In FirstPage.js

class FistPage extends Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.state = {
        username: '',
        password: ''
    }
  }

gotoNext() {
  if (this.state.username == '' || this.state.password == '') {
    Alert.alert(
      'Empty field(s)!',
      'Please fill username and password!',
      [
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ]
    )
  } else {
    this.props.navigator.push({
      id: 'SecondPage',
      name: 'Second Page',
      passProps: {
        username: this.state.username,
        password: this.state.password,
      }
    });
  }
}

I found that I can use passProps :

In SecondPage.js:

class SecondPage extends Component {
  constructor(props) {
    super(props);
    console.log('EmployeeManager - MainPage constructor');
    this.username = props.username;
    this.password = props.password;
  }


  renderScene(route, navigator) {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent:'center'}}>
        <Text> Hello </Text>
        <TouchableHighlight style={{backgroundColor: 'yellow', padding: 10}}
          onPress={this.gotoPersonPage.bind(this)}>
          <Text style={{ color: 'black'}}>Hello {this.username}</Text>
        </TouchableHighlight>
      </View>
    );
  }

this.username is empty.

How can I get the username passed from first page?

Thanks in advance!

EDIT. renderScene from FirstPage.js

renderScene(route, navigator) {
return (
<View style={{flex: 1, alignItems: 'center', marginTop: 90}}>
  <Text style={{textAlign: 'center', fontSize: 20}}>Welcome to    EmployeeManager! </Text>

  <Image source={require('./img/employees.png')} style={{width: 193, height: 130, marginTop: 10}}/>

  <TextInput placeholder='Enter username...'
             style={{width:200, textAlign: 'center'}}
             onChangeText={(text) => this.setState({...this.state, username: text})}/>

  <TextInput placeholder='Enter password...'
             style={{width:200, textAlign: 'center'}}
             secureTextEntry={true}
             onChangeText={(text) => this.setState({...this.state, password: text})}/>

<TouchableHighlight
    onPress={this.state.logged? this.exit.bind(this) : this.gotoNext.bind(this)}>
    <Image source= {this.state.logged? require('./exitButton.png') : require('./loginButton.png')} style={{marginTop: 10}}/>
</TouchableHighlight>

);

Answer 1

Can you show me your renderScene ? the one that is using Navigator in FirstPage .

Your renderScene would look like this:

renderScene(route,navigator){

        if ( route.id == 'SecondPage' ){
            return (<SecondPage 
                username={route.passProps.username}
                password={route.passProps.password} />);
        }
}