通過導航

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} />); 
     } 
}