從textinput傳遞playername到其他場景 - 反應本機

Question

我有一個textInput，其中的球員插入其名稱，我想從他的名字輸入到另一個場景後，他按下播放。

這裏是我的導航在index.android.js文件（到目前爲止工作）：

import Start from './Start'; 
import Board from './Board'; 
import UserInputsPage from './UserInputsPage'; 

export default class dots3 extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute = {{ name: 'Start'}} 
     renderScene = {this.renderScene.bind(this)} 
     /> 
    ); 
    } 

    renderScene (route, navigator){ 
     if(route.name == 'Start'){ 
     return <Start navigator = {navigator} /> 
     } 
     if(route.name == 'Board'){ 
     return <Board navigator = {navigator} /> 
     } 
     if(route.name == 'UserInputsPage'){ 
     return <UserInputsPage navigator = {navigator}/> 
     } 
    } 
} 

而這正是用戶把他們的名字的情景：

import Board from './Board'; 

export default class UserInputsPage extends Component { 
    constructor(props){ 
     super(props); 
     this.state={ 
      playerOne:'' 
     } 
    } 


render(){ 
    return(
     <View style = {styles.container}> 
      <Text style = {styles.title}>Dots {'&'} Boxes</Text> 
      <View style={styles.container}> 
       <TextInput placeholder="Insert Player One Name" value={this.state.playerOne} onChangeText={playerOne => this.setState({playerOne})} style={styles.textinput}/> 
       <TextInput placeholder="Insert Player Two Name" style={styles.textinput}/> 
       <TextInput placeholder="Insert Board Size" style={styles.textinput}/> 
       <Text>{console.log(this.state.playerOne)}</Text> 
      </View> 
      <TouchableOpacity style = {styles.button}> 
      <Button onPress = {this._navigate.bind(this)} title='PLAY' color='#ff5c5c' /> 
     </TouchableOpacity> 
     </View> 
    );  
} 

_navigate(){ 
    this.props.navigator.push({ 
    name: 'Board', 
}); 
} 

}

這就是我希望球員名字出現的地方：

import Row1 from './Row1' 
import Row2 from './Row2' 
import Dot from './Dot' 
import UserInputsPage from './UserInputsPage' 

import VerticalLine from './VerticalLine' 
var size; {/*tamanho do tabuleiro ex: 5/*/ } 

export default class Board extends Component { 

renderHorizontalRow(){ 
var array = []; 
    for(var i = 0 ; i < 5; i++){ 
     array.push(<Row1/>) 
     array.push(<Row2/>) 
    } 
    array.push(<Row1/>) 
    return array; 
} 

render() { 
    return (
     <View> 
     <Text>{console.log()}</Text> 
     <View style = {styles.HorizontalLine}> 
     {this.renderHorizontalRow()} 
     </View> 
     </View> 
    ); 
    } 
}; 

Answer 1

您可以通過props.navigator.push通過state.playerOne，像這樣：

this.props.navigator.push({ 
 
    name: 'Board', 
 
    playerName: this.state.playerOne 
 
})

然後，您將需要確保這得到通過對現場渲染場景通過：

renderScene (route, navigator){ 
 
    if(route.name == 'Start'){ 
 
    return <Start navigator = {navigator}/> 
 
    } 
 
    if(route.name == 'Board'){ 
 
    return <Board navigator = {navigator} playerOne = {route.playerName}/> 
 
    } 
 
    if(route.name == 'UserInputsPage'){ 
 
    return <UserInputsPage navigator = {navigator}/> 
 
    } 
 
}

但是，請注意，如果您傳遞多個道具，這很快就會變得非常難以維護。我會建議您調查react-redux，因爲您的程序變得更加複雜：

https://github.com/reactjs/react-redux