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

将来自textinput的playername传递给其他场景 - 反应原生

1 个答案: