从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