通过导航

Question

阵营本地传递参数我是新来的阵营本地框架和我有以下问题......

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

我想用这个来登录，在这一步，只需将参数传递到下一页，并输出到屏幕“Hello {username}”。

代码：

在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是空的。

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

在此先感谢！

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

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

你renderScene应该是这样的：

renderScene(route,navigator){ 

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