React Native 通过 Navigator 传递参数

Question

我是 React Native 框架的新手，遇到以下问题...

我有一个页面，其中包含一个导航器和 2 个用于“用户名”和“密码”的文本输入。

我想用这个登录，在这一步，只需将参数传入下一页，并输出到屏幕“你好{用户名}”。

代码：

在 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,
      }
    });
  }
}

发现可以使用passProps：

在 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 为空。

如何获取第一页传递的用户名？

提前致谢！

编辑。来自 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

你能告诉我你的renderScene吗？在FirstPage中使用导航器的那个。

您的renderScene 将如下所示：

renderScene(route,navigator){

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